Search results

Toolbar

The RichTextEditor’s toolbar contains a collection of tools such as bold, italic and text alignment buttons that are used to format the content. However, in most integrations, it’s desirable to change the toolbar configuration to suit needs. Fortunately, that’s quite easy to do too.

To create RichTextEditor with Markdown editing feature, it can be added by defining the Toolbar as a collection of built-in items. It renders the button with icon and text.

The rich text editor allows you to configure different types of toolbar using type field in toolbarSettings property. The types of toolbar are:

  1. Expand
  2. MultiRow

Expand Toolbar

The default mode of toolbar is Expand, it will hide the overflowing items in the next row. Click the expand arrow to view overflowing toolbar items.

razor
toolbar-expand.cs
@Html.EJS().RichTextEditor("types").Value((string)ViewBag.value).Height("720px").ToolbarSettings(e => { e.Type(Syncfusion.EJ2.RichTextEditor.ToolbarType.Expand); }).Render()
public IActionResult Toolbar()
{
    ViewBag.value = @"<p>The rich text editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. 
                    Users can format their content using standard toolbar commands.</p>
                <p><b> Key features:</b></p>
                <ul><li><p> Provides &lt; IFRAME &gt; and &lt; DIV &gt; modes </p></li>
                    <li><p> Capable of handling markdown editing.</p></li>
                    <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
                    <li><p> Provides a fully customizable toolbar.</p></li>
                    <li><p> Provides HTML view to edit the source directly for developers.</p></li>
                    <li><p> Supports third - party library integration.</p></li>
                    <li><p> Allows preview of modified content before saving it.</p></li>
                    <li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
                    <li><p> Contains undo / redo manager.</p></li>
                    <li><p> Creates bulleted and numbered lists.</p></li>
                </ul>";
    return View();
}

Multi-row Toolbar

Set the type as MultiRow in toolbarSettings to hides the overflowing items in the next row. All toolbar items are visible.

razor
toolbar-multi.cs
@Html.EJS().RichTextEditor("types").Value((string)ViewBag.value).Height("720px").ToolbarSettings(e => { e.Type(Syncfusion.EJ2.RichTextEditor.ToolbarType.MultiRow); }).Render()
public IActionResult Toolbar()
{
    ViewBag.value = @"<p>The rich text editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. 
                    Users can format their content using standard toolbar commands.</p>
                <p><b> Key features:</b></p>
                <ul><li><p> Provides &lt; IFRAME &gt; and &lt; DIV &gt; modes </p></li>
                    <li><p> Capable of handling markdown editing.</p></li>
                    <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
                    <li><p> Provides a fully customizable toolbar.</p></li>
                    <li><p> Provides HTML view to edit the source directly for developers.</p></li>
                    <li><p> Supports third - party library integration.</p></li>
                    <li><p> Allows preview of modified content before saving it.</p></li>
                    <li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
                    <li><p> Contains undo / redo manager.</p></li>
                    <li><p> Creates bulleted and numbered lists.</p></li>
                </ul>";
    return View();
}

Floating Toolbar

By default, toolbar is float at the top of the RichTextEditor on scrolling. By disabling the enableFloating, toolbar at the top of the content area of RichTextEditor. Floating toolbar offset can be customize by specifies the offset of the floating toolbar from documents top position using floatingToolbarOffset.

Enable or disable the floating toolbar using enableFloating of toolbarSettings property.

razor
floating-toolbar.cs
<div class="control-wrapper">
    <div class="control-section">
        @Html.EJS().RichTextEditor("types").Value((string)ViewBag.value).Created("created").Height("720px").ToolbarSettings(e => { e.Type(Syncfusion.EJ2.RichTextEditor.ToolbarType.Expand).EnableFloating(false); }).Render()
    </div>
    <div class="col-lg-4 property-section" id="all-option-table">
        <span id="props"> Enable/Disable Floating: </span>
        @Html.EJS().CheckBox("float").Checked(false).Label("Enable Floating").Change("checkchange").Render()
    </div>
</div>

<script type="text/javascript">
    var defaultRTE;
    function created() {
        defaultRTE = this;
    }
    function checkchange(args) {
        defaultRTE.toolbarSettings.enableFloating = args.checked;
        defaultRTE.dataBind();
    }
</script>
public IActionResult FloatingToolbar()
{
    ViewBag.value = @"<p>The rich text editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. 
                    Users can format their content using standard toolbar commands.</p>
                <p><b> Key features:</b></p>
                <ul><li><p> Provides &lt; IFRAME &gt; and &lt; DIV &gt; modes </p></li>
                    <li><p> Capable of handling markdown editing.</p></li>
                    <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
                    <li><p> Provides a fully customizable toolbar.</p></li>
                    <li><p> Provides HTML view to edit the source directly for developers.</p></li>
                    <li><p> Supports third - party library integration.</p></li>
                    <li><p> Allows preview of modified content before saving it.</p></li>
                    <li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
                    <li><p> Contains undo / redo manager.</p></li>
                    <li><p> Creates bulleted and numbered lists.</p></li>
                </ul>";
    return View();
}

Toolbar Items

The following table lists the available tools on the toolbar.

Name Summary Initialization
Undo Allows to undo the actions. toolbarSettings: { items: [‘Undo’]}
Redo Allows to redo the actions. toolbarSettings: { items: [‘Redo’]}
Alignment Align the content with left, center, and right margin. toolbarSettings: { items: [‘Alignments’]}
OrderedList Create a new list item(numbered). toolbarSettings: { items: [‘OrderedList’]}
UnorderedList Create a new list item(bulleted). toolbarSettings: { items: [‘UnorderedList’]}
Indent Allows to increase the indent level of the content. toolbarSettings: { items: [‘Indent’]}
Outdent Allows to decrease the indent level of the content. toolbarSettings: { items: [‘Outdent’]}
Hyperlink Creates a hyperlink to a text or image to a specific location in the content. toolbarSettings: { items: [‘CreateLink’]}
Images Inserts an image from an online source or local computer. toolbarSettings: { items: [‘Image’]}
LowerCase Change the case of selected text to lower in the content. toolbarSettings: { items: [‘LowerCase’]}
UpperCase Change the case of selected text to upper in the content. toolbarSettings: { items: [‘UpperCase’’]}
SubScript Makes the selected text as subscript (lower). toolbarSettings: { items: [‘SubScript’]}
SuperScript Makes the selected text as superscript (higher). toolbarSettings: { items: [‘SuperScript’’]}
Print Allows to print the editor content. toolbarSettings: { items: [‘Print’]}
FontName Defines the fonts that appear under the Font Family DropDownList from the rich text editor’s toolbar. toolbarSettings: { items: [‘FontName’]}
FontSize Defines the font sizes that appear under the Font Size DropDownList from the rich text editor’s toolbar. toolbarSettings: { items: [‘FontSize’]}
FontColor Specifies an array of colors can be used in the colors popup for font color. toolbarSettings: { items: [‘FontColor’]}
BackgroundColor Specifies an array of colors can be used in the colors popup for background color. toolbarSettings: { items: [‘BackgroundColor’]}
Format An Object with the options that will appear in the Paragraph Format dropdown from the toolbar. toolbarSettings: { items: [‘Formats’]}
StrikeThrough Apply double line strike through formatting for the selected text. toolbarSettings: { items: [‘StrikeThrough’]}
ClearFormat The clear format tool is useful to remove all formatting styles (such as bold, italic, underline, color, superscript, subscript, and more) from currently selected text. As a result, all the text formatting will be cleared and return to its default formatting styles. toolbarSettings: { items: [‘ClearFormat’]}
FullScreen Stretches the editor to the maximum width and height of the browser window. toolbarSettings: { items: [‘FullScreen’]}
SourceCode RichTextEditor includes the ability for users to directly edit HTML code via “Source View”. If you made any modification in Source view directly, synchronize with Design view. toolbarSettings: { items: [‘SourceCode’]}

By default, tool will be arranged in following order.

items: [‘Bold’, ‘Italic’, ‘Underline’, ’|’, ‘Formats’, ‘Alignments’, ‘OrderedList’, ‘UnorderedList’, ’|’, ‘CreateLink’, ‘Image’, ’|’, ‘SourceCode’, ‘Undo’, ‘Redo’]

We can customize the tools order as our application requirement. If you are not specifying any tools order, the editor will create the toolbar with default items.

Custom tool

The rich text editor allows you to configure your own commands to its toolbar using toolbarSettings property. The command can be plain text, icon, or HTML template. You can also define the order and group where the command should be included. Bind the action to the command by getting its instance.

This sample shows how to add your own commands to toolbar of the rich text editor. The “Ω” command is added to insert special characters in the editor.

The below code snippet, for custom tool with tooltip text which will be included in items field of toolbarSettings property.

    var tools = new {
        tooltipText = "Insert Symbol",
            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;'> &#937;</div></button>"
    };
    ViewBag.items = new object[] { "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList",
        "UnorderedList", "|", "CreateLink", "Image", "|", "SourceCode", tools
        , "|", "Undo", "Redo"
    };

Click the “Ω” command to show the special characters list, and then choose the character to be inserted in the editor.

razor
custom-tool.cs
<div class="control-wrapper"  id="rteSection">
    <div class="control-section">
        @Html.EJS().RichTextEditor("customtool").Value("<p>The custom command 'insert special character' is configured as the last item of the toolbar. Click on the command and choose the special character you want to include from the popup.</p>").Created("created").ToolbarSettings(e =>  e.Items((object)ViewBag.items)).Render()
    </div>
    <div id="customTbarDialog" style="display: none">
        <div id="rteSpecial_char">
            <div class="char_block" title="^">^</div>
            <div class="char_block" title="_">_</div>
            <div class="char_block" title="`">`</div>
            <div class="char_block" title="{">{</div>
            <div class="char_block" title="|">|</div>
            <div class="char_block" title="}">}</div>
            <div class="char_block" title="~">~</div>
            <div class="char_block" title="&nbsp;">&nbsp;</div>
            <div class="char_block" title="¡">¡</div>
            <div class="char_block" title="¢">¢</div>
            <div class="char_block" title="£">£</div>
            <div class="char_block" title="¤">¤</div>
            <div class="char_block" title="¥">¥</div>
            <div class="char_block" title="₹"></div>
            <div class="char_block" title="¦">¦</div>
            <div class="char_block" title="§">§</div>
            <div class="char_block" title="¨">¨</div>
            <div class="char_block" title="©">©</div>
            <div class="char_block" title="ª">ª</div>
            <div class="char_block" title="«">«</div>
            <div class="char_block" title="¬">¬</div>
            <div class="char_block" title="­">­</div>
            <div class="char_block" title="®">®</div>
            <div class="char_block" title="¯">¯</div>
            <div class="char_block" title="°">°</div>
            <div class="char_block" title="±">±</div>
            <div class="char_block" title="²">²</div>
            <div class="char_block" title="³">³</div>
            <div class="char_block" title="´">´</div>
            <div class="char_block" title="µ">µ</div>
            <div class="char_block" title="¶"></div>
            <div class="char_block" title="·">·</div>
            <div class="char_block" title="¸">¸</div>
            <div class="char_block" title="¹">¹</div>
            <div class="char_block" title="º">º</div>
            <div class="char_block" title="»">»</div>
            <div class="char_block" title="¼">¼</div>
            <div class="char_block" title="½">½</div>
            <div class="char_block" title="¾">¾</div>
            <div class="char_block" title="¿">¿</div>
            <div class="char_block" title="À">À</div>
            <div class="char_block" title="Á">Á</div>
            <div class="char_block" title="Â">Â</div>
            <div class="char_block" title="Ã">Ã</div>
        </div>
    </div>
</div>
<script>
    var defaultRTE, selection = new ej.richtexteditor.NodeSelection(), ranges;
    function created() {
        defaultRTE = this; 
        var customBtn = defaultRTE.element.querySelector('#custom_tbar');
        var dialogCtn = document.getElementById('rteSpecial_char');
        // Initialization of Dialog
        var dialog = new ej.popups.Dialog({
            header: 'Special Characters',
            content: dialogCtn,
            target: document.getElementById('rteSection'),
            showCloseIcon: false,
            isModal: true,
            height: 'auto',
            overlayClick: dialogOverlay,
            buttons: [{ buttonModel: { content: "Insert", isPrimary: true }, click: onInsert }, { buttonModel: { content: 'Cancel' }, click: dialogOverlay }]
        });
        // Render initialized Dialog
        dialog.appendTo('#customTbarDialog');
        dialog.hide();
        customBtn.onclick = function (e) {
            dialog.element.style.display = '';
            ranges = selection.getRange(document);
            dialog.width = defaultRTE.element.offsetWidth * 0.5;
            dialog.dataBind();
            dialog.show();
            var dialogCtn = document.getElementById('rteSpecial_char');
            dialogCtn.onclick = function (e) {
                var target = e.target;
                var activeEle = dialog.element.querySelector('.char_block.e-active');
                if (target.classList.contains('char_block')) {
                    target.classList.add('e-active');
                    if (activeEle) {
                        activeEle.classList.remove('e-active');
                    }
                }
            };
            customBtn.onclick = function (e) {
                defaultRTE.focusIn();
                dialog.element.style.display = '';
                ranges = selection.getRange(document);
                dialog.width = defaultRTE.element.offsetWidth * 0.5;
                dialog.dataBind();
                dialog.show();
            };
        };
        function onInsert() {
            var activeEle = dialog.element.querySelector('.char_block.e-active');
            if (activeEle) {
                ranges.insertNode(document.createTextNode(activeEle.textContent));
                defaultRTE.formatter.saveData();
                defaultRTE.formatter.enableUndo(defaultRTE);
            }
            dialogOverlay();
        }
        function dialogOverlay() {
            var activeEle = dialog.element.querySelector('.char_block.e-active');
            if (activeEle) {
                activeEle.classList.remove('e-active');
            }
            dialog.hide();
        }
    }
</script>
<style>
    .e-rte-custom-tbar-section #special_char,
    .e-rte-custom-tbar-section .char_block {
        display: inline-block;
    }

    #custom_tbar,
    #custom_tbar div {
        cursor: pointer;
    }

    #rteSpecial_char {
        padding: 15px 0 15px 0;
    }

    .material .e-rte-custom-tbar-section .char_block.e-active {
        outline: 1px solid #e3165b;
        border-color: #e3165b;
    }

    .fabric .e-rte-custom-tbar-section .char_block.e-active {
        outline: 1px solid #0078d6;
        border-color: #0078d6;
    }

    .bootstrap .e-rte-custom-tbar-section .char_block.e-active {
        outline: 1px solid #317ab9;
        border-color: #317ab9;
    }

    .highcontrast .e-rte-custom-tbar-section .char_block.e-active {
        outline: 1px solid #ffd939;
        border-color: #ffd939;
    }

    .fabric.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text,
    .highcontrast.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
        padding-right: 10px;
    }

    .bootstrap.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text,
    .bootstrap .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
        padding-right: 6px;
    }

    .fabric .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text,
    .highcontrast .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
        padding-right: 8px;
    }

    .e-rte-custom-tbar-section .char_block {
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: 0 5px 5px 0;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #DDDDDD;
        font-size: 20px;
        cursor: pointer;
        user-select: none;
    }

    #rteSection {
        height: 500px;
    }
    .e-bigger #custom_tbar .rtecustomtool {
        font-size: 18px;
    }
    #custom_tbar .rtecustomtool {
        font-size: 16px;
    }

    @@media (min-width: 320px) and (max-width: 480px) {
    .fabric.e-bigger #customTbarDialog {
        min-width: 281px;
    }

    .fabric #customTbarDialog {
        min-width: 241px;
    }

    .bootstrap.e-bigger #customTbarDialog,
    .bootstrap #customTbarDialog {
        min-width: 223px;
    }

    .highcontrast.e-bigger #customTbarDialog {
        min-width: 283px;
    }
    .highcontrast #customTbarDialog {
        min-width: 243px;
    }
    .material #customTbarDialog {
        min-width: 224px;
    }
    .material.e-bigger #customTbarDialog {
        min-width: 236px;
    }
}
    </style>
public ActionResult CustomTool()
{
    var tools = new {
        tooltipText = "Insert Symbol",
            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;'> &#937;</div></button>"
    };
    ViewBag.items = new object[] { "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList",
        "UnorderedList", "|", "CreateLink", "Image", "|", "SourceCode", tools
        , "|", "Undo", "Redo"
    }; 
    return View();
}

Quick inline toolbar

Quick commands are opened as context-menu on clicking the corresponding element. The commands must be passed as string collection to image, text, and link attributes of the quickToolbarSettings property.

Target Element Default Quick Toolbar items
image ‘Replace’, ‘Align’, ‘Caption’, ‘Remove’, ‘InsertLink’, ‘Display’, ‘AltText’,‘Dimension’.
link ‘Open’, ‘Edit’, ‘UnLink’.
text ‘Cut’, ‘Copy’, ‘Paste’.

Custom tool can be added to the corresponding quick toolbar, using quickToolbarSettings property.

The below sample demonstrates the option to insert the image to the RichTextEditor content as well as option to rotate the image through the quick toolbar.

razor
quick-inline.cs
<div class="control-section">
    @Html.EJS().RichTextEditor("inline").InlineMode((object)ViewBag.inline).ToolbarSettings(e => e.Items((object)ViewBag.items)).QuickToolbarSettings(e => { e.Image((object)ViewBag.image); }).Format((object)ViewBag.width).Value((string)ViewBag.value).Render()
</div>
public IActionResult InlineToolbar()
{
ViewBag.items = new[] { "Bold", "Italic", "Underline",
        "Formats", "-", "Alignments", "OrderedList", "UnorderedList",
        "CreateLink" };
    ViewBag.width = new
    {
        width = "auto"
    };
    ViewBag.value = @"<p>The rich text editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. 
                    Users can format their content using standard toolbar commands.</p>
                <p><b> Key features:</b></p>
                <ul><li><p> Provides &lt; IFRAME &gt; and &lt; DIV &gt; modes </p></li>
                    <li><p> Capable of handling markdown editing.</p></li>
                    <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
                    <li><p> Provides a fully customizable toolbar.</p></li>
                    <li><p> Provides HTML view to edit the source directly for developers.</p></li>
                    <li><p> Supports third - party library integration.</p></li>
                    <li><p> Allows preview of modified content before saving it.</p></li>
                    <li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
                    <li><p> Contains undo / redo manager.</p></li>
                    <li><p> Creates bulleted and numbered lists.</p></li>
                </ul>";

    ViewBag.inline = new
    {
        enable = true,
        onSelection = true
    };
    object tools1 = new
    {
        tooltipText = "Rotate Left",
        template = "<button class='e-tbar-btn e-btn' id='roatateLeft'><span class='e-btn-icon e-icons e-rotate-left'></span>"
    };
    object tools2 = new
    {
        tooltipText = "Rotate Right",
        template = "<button class='e-tbar-btn e-btn' id='roatateRight'><span class='e-btn-icon e-icons e-rotate-right'></span>"
    };
    ViewBag.image = new[] {
        "Replace", "Align", "Caption", "Remove", "InsertLink", "OpenImageLink", "-",
        "EditImageLink", "RemoveImageLink", "Display", "AltText", "Dimension",tools1
        , tools2
    };
    return View();
}