CODEWITHSUNDEEP
rich-text-editorsyncfusion
Ahmad
Ahmad

Reputation: 887

Syncfusion RichTextEditor ASP.Net MVC Format dropdown

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="";

Upvotes: 0

Views: 608

Answers (1)

Prince Oliver
Prince Oliver

Reputation: 241

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

Upvotes: 1

Related Questions