Syncfusion RichTextEditor ASP.Net MVC Format dropdown











up vote
0
down vote

favorite












Can someone please help me how can I change the contents of Formats dropdown in richtexteditor ej2 syncfusion?



At the moment, default values are: Paragraph, Code, Quotation, Heading 1 etc.



I want to remove the Code, Quotation and add a new custom Format called "My Paragraph".



I have gone through the documentation and apparently, it is not listed.



Help will be appreciated.
Here is what my current configuration is:



@Html.EJS().RichTextEditor("table").ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).QuickToolbarSettings(e => { e.Table((object)ViewBag.table); }).InsertImageSettings(new RichTextEditorImageSettings() { Path = "/Uploads/", SaveUrl = "/Home/Save" }).ShowCharCount(true).MaxLength(2000).Created("created").Render()


Controller method return configuration in viewbag



 var tools = new
{
tooltipText = "Custom Tools",
template = "<button class='e-tbar-btn e-btn' tabindex='-1' id='custom_tbar' style='width:100%'><div class='e-tbar-btn-text rtecustomtool' style='font-weight: 500;'> Custom Tools</div></button>"
};

ViewBag.tools = new object {
"Bold", "Italic", "Underline", "StrikeThrough",
"FontColor", "BackgroundColor",
"LowerCase", "UpperCase", "|",
"Formats", "Alignments", "OrderedList", "UnorderedList",
"Outdent", "Indent", "CreateTable","|",
"CreateLink", "Image", "|", "ClearFormat", "Print",
"SourceCode", "FullScreen", tools,"|", "Undo", "Redo"
};

ViewBag.table = new {
"tableRows","tableColumns","tableCellVerticalAlign","tableCellHorizontalAlign","backgroundcolor"
};
ViewBag.value="";









share|improve this question




























    up vote
    0
    down vote

    favorite












    Can someone please help me how can I change the contents of Formats dropdown in richtexteditor ej2 syncfusion?



    At the moment, default values are: Paragraph, Code, Quotation, Heading 1 etc.



    I want to remove the Code, Quotation and add a new custom Format called "My Paragraph".



    I have gone through the documentation and apparently, it is not listed.



    Help will be appreciated.
    Here is what my current configuration is:



    @Html.EJS().RichTextEditor("table").ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).QuickToolbarSettings(e => { e.Table((object)ViewBag.table); }).InsertImageSettings(new RichTextEditorImageSettings() { Path = "/Uploads/", SaveUrl = "/Home/Save" }).ShowCharCount(true).MaxLength(2000).Created("created").Render()


    Controller method return configuration in viewbag



     var tools = new
    {
    tooltipText = "Custom Tools",
    template = "<button class='e-tbar-btn e-btn' tabindex='-1' id='custom_tbar' style='width:100%'><div class='e-tbar-btn-text rtecustomtool' style='font-weight: 500;'> Custom Tools</div></button>"
    };

    ViewBag.tools = new object {
    "Bold", "Italic", "Underline", "StrikeThrough",
    "FontColor", "BackgroundColor",
    "LowerCase", "UpperCase", "|",
    "Formats", "Alignments", "OrderedList", "UnorderedList",
    "Outdent", "Indent", "CreateTable","|",
    "CreateLink", "Image", "|", "ClearFormat", "Print",
    "SourceCode", "FullScreen", tools,"|", "Undo", "Redo"
    };

    ViewBag.table = new {
    "tableRows","tableColumns","tableCellVerticalAlign","tableCellHorizontalAlign","backgroundcolor"
    };
    ViewBag.value="";









    share|improve this question


























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      Can someone please help me how can I change the contents of Formats dropdown in richtexteditor ej2 syncfusion?



      At the moment, default values are: Paragraph, Code, Quotation, Heading 1 etc.



      I want to remove the Code, Quotation and add a new custom Format called "My Paragraph".



      I have gone through the documentation and apparently, it is not listed.



      Help will be appreciated.
      Here is what my current configuration is:



      @Html.EJS().RichTextEditor("table").ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).QuickToolbarSettings(e => { e.Table((object)ViewBag.table); }).InsertImageSettings(new RichTextEditorImageSettings() { Path = "/Uploads/", SaveUrl = "/Home/Save" }).ShowCharCount(true).MaxLength(2000).Created("created").Render()


      Controller method return configuration in viewbag



       var tools = new
      {
      tooltipText = "Custom Tools",
      template = "<button class='e-tbar-btn e-btn' tabindex='-1' id='custom_tbar' style='width:100%'><div class='e-tbar-btn-text rtecustomtool' style='font-weight: 500;'> Custom Tools</div></button>"
      };

      ViewBag.tools = new object {
      "Bold", "Italic", "Underline", "StrikeThrough",
      "FontColor", "BackgroundColor",
      "LowerCase", "UpperCase", "|",
      "Formats", "Alignments", "OrderedList", "UnorderedList",
      "Outdent", "Indent", "CreateTable","|",
      "CreateLink", "Image", "|", "ClearFormat", "Print",
      "SourceCode", "FullScreen", tools,"|", "Undo", "Redo"
      };

      ViewBag.table = new {
      "tableRows","tableColumns","tableCellVerticalAlign","tableCellHorizontalAlign","backgroundcolor"
      };
      ViewBag.value="";









      share|improve this question















      Can someone please help me how can I change the contents of Formats dropdown in richtexteditor ej2 syncfusion?



      At the moment, default values are: Paragraph, Code, Quotation, Heading 1 etc.



      I want to remove the Code, Quotation and add a new custom Format called "My Paragraph".



      I have gone through the documentation and apparently, it is not listed.



      Help will be appreciated.
      Here is what my current configuration is:



      @Html.EJS().RichTextEditor("table").ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).QuickToolbarSettings(e => { e.Table((object)ViewBag.table); }).InsertImageSettings(new RichTextEditorImageSettings() { Path = "/Uploads/", SaveUrl = "/Home/Save" }).ShowCharCount(true).MaxLength(2000).Created("created").Render()


      Controller method return configuration in viewbag



       var tools = new
      {
      tooltipText = "Custom Tools",
      template = "<button class='e-tbar-btn e-btn' tabindex='-1' id='custom_tbar' style='width:100%'><div class='e-tbar-btn-text rtecustomtool' style='font-weight: 500;'> Custom Tools</div></button>"
      };

      ViewBag.tools = new object {
      "Bold", "Italic", "Underline", "StrikeThrough",
      "FontColor", "BackgroundColor",
      "LowerCase", "UpperCase", "|",
      "Formats", "Alignments", "OrderedList", "UnorderedList",
      "Outdent", "Indent", "CreateTable","|",
      "CreateLink", "Image", "|", "ClearFormat", "Print",
      "SourceCode", "FullScreen", tools,"|", "Undo", "Redo"
      };

      ViewBag.table = new {
      "tableRows","tableColumns","tableCellVerticalAlign","tableCellHorizontalAlign","backgroundcolor"
      };
      ViewBag.value="";






      rich-text-editor syncfusion






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 22 at 7:48

























      asked Nov 22 at 7:38









      Ahmad

      503213




      503213
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote



          accepted










          You can modify the existing “format” option using Format property as shown below.



          [View]



          @Html.EJS().RichTextEditor("default").Format((object)ViewBag.types).ActionBegin("onBegin").Render() 
          <script>
          function onBegin(e) {
          alert(e.element.textContent + " is Selected");
          }
          </script>


          [Controller]



          public ActionResult Index() 
          {
          object format1 = new { text = "Paragraph", value = "P" };
          object format2 = new { text = "My Paragraph", value = "BlockQuote" };
          object format3 = new { text = "Heading 1", value = "H1" };
          object format4 = new { text = "Heading 2", value = "H2" };
          ViewBag.types = new { width = "40px",
          types = new { format1, format2, format3, format4 }
          };
          return View();
          }


          If the newly added item has any predefined format, you can mention that format in value. Else if you want to perform custom action, then you can get the selected item through actionBegin event of RTE and perform required action there. Now the items will be displayed in toolbar as shown below



          Screenshot



          Sample






          share|improve this answer





















          • Can you please tell how can I give custom css classes in tag to these new formats? what will be the key for that?
            – Ahmad
            Nov 26 at 7:01










          • I have tried "spriteCssClass" and "cssClass" option but none of them worked for me
            – Ahmad
            Nov 26 at 7:39










          • @Ahmad Currently we cannot give the CSS Classes through C#. This will be fixed and released in upcoming 2018 Volume 4 release.
            – Prince Oliver
            Nov 29 at 10:32











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425994%2fsyncfusion-richtexteditor-asp-net-mvc-format-dropdown%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          0
          down vote



          accepted










          You can modify the existing “format” option using Format property as shown below.



          [View]



          @Html.EJS().RichTextEditor("default").Format((object)ViewBag.types).ActionBegin("onBegin").Render() 
          <script>
          function onBegin(e) {
          alert(e.element.textContent + " is Selected");
          }
          </script>


          [Controller]



          public ActionResult Index() 
          {
          object format1 = new { text = "Paragraph", value = "P" };
          object format2 = new { text = "My Paragraph", value = "BlockQuote" };
          object format3 = new { text = "Heading 1", value = "H1" };
          object format4 = new { text = "Heading 2", value = "H2" };
          ViewBag.types = new { width = "40px",
          types = new { format1, format2, format3, format4 }
          };
          return View();
          }


          If the newly added item has any predefined format, you can mention that format in value. Else if you want to perform custom action, then you can get the selected item through actionBegin event of RTE and perform required action there. Now the items will be displayed in toolbar as shown below



          Screenshot



          Sample






          share|improve this answer





















          • Can you please tell how can I give custom css classes in tag to these new formats? what will be the key for that?
            – Ahmad
            Nov 26 at 7:01










          • I have tried "spriteCssClass" and "cssClass" option but none of them worked for me
            – Ahmad
            Nov 26 at 7:39










          • @Ahmad Currently we cannot give the CSS Classes through C#. This will be fixed and released in upcoming 2018 Volume 4 release.
            – Prince Oliver
            Nov 29 at 10:32















          up vote
          0
          down vote



          accepted










          You can modify the existing “format” option using Format property as shown below.



          [View]



          @Html.EJS().RichTextEditor("default").Format((object)ViewBag.types).ActionBegin("onBegin").Render() 
          <script>
          function onBegin(e) {
          alert(e.element.textContent + " is Selected");
          }
          </script>


          [Controller]



          public ActionResult Index() 
          {
          object format1 = new { text = "Paragraph", value = "P" };
          object format2 = new { text = "My Paragraph", value = "BlockQuote" };
          object format3 = new { text = "Heading 1", value = "H1" };
          object format4 = new { text = "Heading 2", value = "H2" };
          ViewBag.types = new { width = "40px",
          types = new { format1, format2, format3, format4 }
          };
          return View();
          }


          If the newly added item has any predefined format, you can mention that format in value. Else if you want to perform custom action, then you can get the selected item through actionBegin event of RTE and perform required action there. Now the items will be displayed in toolbar as shown below



          Screenshot



          Sample






          share|improve this answer





















          • Can you please tell how can I give custom css classes in tag to these new formats? what will be the key for that?
            – Ahmad
            Nov 26 at 7:01










          • I have tried "spriteCssClass" and "cssClass" option but none of them worked for me
            – Ahmad
            Nov 26 at 7:39










          • @Ahmad Currently we cannot give the CSS Classes through C#. This will be fixed and released in upcoming 2018 Volume 4 release.
            – Prince Oliver
            Nov 29 at 10:32













          up vote
          0
          down vote



          accepted







          up vote
          0
          down vote



          accepted






          You can modify the existing “format” option using Format property as shown below.



          [View]



          @Html.EJS().RichTextEditor("default").Format((object)ViewBag.types).ActionBegin("onBegin").Render() 
          <script>
          function onBegin(e) {
          alert(e.element.textContent + " is Selected");
          }
          </script>


          [Controller]



          public ActionResult Index() 
          {
          object format1 = new { text = "Paragraph", value = "P" };
          object format2 = new { text = "My Paragraph", value = "BlockQuote" };
          object format3 = new { text = "Heading 1", value = "H1" };
          object format4 = new { text = "Heading 2", value = "H2" };
          ViewBag.types = new { width = "40px",
          types = new { format1, format2, format3, format4 }
          };
          return View();
          }


          If the newly added item has any predefined format, you can mention that format in value. Else if you want to perform custom action, then you can get the selected item through actionBegin event of RTE and perform required action there. Now the items will be displayed in toolbar as shown below



          Screenshot



          Sample






          share|improve this answer












          You can modify the existing “format” option using Format property as shown below.



          [View]



          @Html.EJS().RichTextEditor("default").Format((object)ViewBag.types).ActionBegin("onBegin").Render() 
          <script>
          function onBegin(e) {
          alert(e.element.textContent + " is Selected");
          }
          </script>


          [Controller]



          public ActionResult Index() 
          {
          object format1 = new { text = "Paragraph", value = "P" };
          object format2 = new { text = "My Paragraph", value = "BlockQuote" };
          object format3 = new { text = "Heading 1", value = "H1" };
          object format4 = new { text = "Heading 2", value = "H2" };
          ViewBag.types = new { width = "40px",
          types = new { format1, format2, format3, format4 }
          };
          return View();
          }


          If the newly added item has any predefined format, you can mention that format in value. Else if you want to perform custom action, then you can get the selected item through actionBegin event of RTE and perform required action there. Now the items will be displayed in toolbar as shown below



          Screenshot



          Sample







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 23 at 5:03









          Prince Oliver

          562




          562












          • Can you please tell how can I give custom css classes in tag to these new formats? what will be the key for that?
            – Ahmad
            Nov 26 at 7:01










          • I have tried "spriteCssClass" and "cssClass" option but none of them worked for me
            – Ahmad
            Nov 26 at 7:39










          • @Ahmad Currently we cannot give the CSS Classes through C#. This will be fixed and released in upcoming 2018 Volume 4 release.
            – Prince Oliver
            Nov 29 at 10:32


















          • Can you please tell how can I give custom css classes in tag to these new formats? what will be the key for that?
            – Ahmad
            Nov 26 at 7:01










          • I have tried "spriteCssClass" and "cssClass" option but none of them worked for me
            – Ahmad
            Nov 26 at 7:39










          • @Ahmad Currently we cannot give the CSS Classes through C#. This will be fixed and released in upcoming 2018 Volume 4 release.
            – Prince Oliver
            Nov 29 at 10:32
















          Can you please tell how can I give custom css classes in tag to these new formats? what will be the key for that?
          – Ahmad
          Nov 26 at 7:01




          Can you please tell how can I give custom css classes in tag to these new formats? what will be the key for that?
          – Ahmad
          Nov 26 at 7:01












          I have tried "spriteCssClass" and "cssClass" option but none of them worked for me
          – Ahmad
          Nov 26 at 7:39




          I have tried "spriteCssClass" and "cssClass" option but none of them worked for me
          – Ahmad
          Nov 26 at 7:39












          @Ahmad Currently we cannot give the CSS Classes through C#. This will be fixed and released in upcoming 2018 Volume 4 release.
          – Prince Oliver
          Nov 29 at 10:32




          @Ahmad Currently we cannot give the CSS Classes through C#. This will be fixed and released in upcoming 2018 Volume 4 release.
          – Prince Oliver
          Nov 29 at 10:32


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425994%2fsyncfusion-richtexteditor-asp-net-mvc-format-dropdown%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Berounka

          Sphinx de Gizeh

          Different font size/position of beamer's navigation symbols template's content depending on regular/plain...