Toolbar in ASP.NET CORE Rich text editor control

10 Oct 202424 minutes to read

The Rich Text Editor’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 Rich Text Editor 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 type is Expand, it will hide the overflowing items in the next row. By clicking the expand arrow, view the overflowing toolbar items.

<div style="width:500px; margin:0 auto;">
    <ejs-richtexteditor id="toolbar-types">
        <e-richtexteditor-toolbarsettings type="Expand"></e-richtexteditor-toolbarsettings>
        <e-content-template>
            <p>
                The Rich Text Editor control 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>
        </e-content-template>
    </ejs-richtexteditor>
</div>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

Multi-row Toolbar

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

<div style="width:500px; margin:0 auto;">
    <ejs-richtexteditor id="toolbar-types">
        <e-richtexteditor-toolbarsettings type="MultiRow"></e-richtexteditor-toolbarsettings>
        <e-content-template>
            <p>
                The Rich Text Editor control 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>
        </e-content-template>
    </ejs-richtexteditor>
</div>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

Floating Toolbar

By default, toolbar is float at the top of the Rich Text Editor on scrolling. By disabling the enableFloating, toolbar at the top of the content area of Rich Text Editor. 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.

<div style="width:500px;margin:0 auto;">
    <ejs-richtexteditor id="toolbar-floating" height="720px" created="created">
        <e-richtexteditor-toolbarsettings type="MultiRow" enableFloating="false"></e-richtexteditor-toolbarsettings>
        <e-content-template>
            <p>
                The Rich Text Editor control 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>
        </e-content-template>
    </ejs-richtexteditor>
    <div class="col-lg-12" >
        <span id="props"> Enable/Disable Floating: </span>
        <ejs-checkbox id="float" checked="false" label="Enable Floating" change="checkchange"></ejs-checkbox>
    </div>
</div>
<script type="text/javascript">
    var defaultRTE;
    function created() {
        defaultRTE = this;
    }
    function checkchange(args) {
        defaultRTE.toolbarSettings.enableFloating = args.checked;
        defaultRTE.dataBind();
    }
</script>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

Toolbar Items

The following table lists the available tools on the toolbar.

Name Icons Summary Initialization
Undo Undo icon Allows to undo the actions. toolbarSettings: { items: [‘Undo’]}
Redo Redo icon Allows to redo the actions. toolbarSettings: { items: [‘Redo’]}
Alignment Alignment icon Align the content with left, center, and right margin. toolbarSettings: { items: [‘Alignments’]}
OrderedList OrderedList icon Create a new list item(numbered). toolbarSettings: { items: [‘OrderedList’]}
UnorderedList UnorderedList icon Create a new list item(bulleted). toolbarSettings: { items: [‘UnorderedList’]}
Indent Indent icon Allows to increase the indent level of the content. toolbarSettings: { items: [‘Indent’]}
Outdent Outdent icon Allows to decrease the indent level of the content. toolbarSettings: { items: [‘Outdent’]}
Hyperlink Hyperlink icon Creates a hyperlink to a text or image to a specific location in the content. toolbarSettings: { items: [‘CreateLink’]}
Images Images icon Inserts an image from an online source or local computer. toolbarSettings: { items: [‘Image’]}
LowerCase LowerCase icon Change the case of selected text to lower in the content. toolbarSettings: { items: [‘LowerCase’]}
UpperCase UpperCase icon Change the case of selected text to upper in the content. toolbarSettings: { items: [‘UpperCase’’]}
SubScript SubScript icon Makes the selected text as subscript (lower). toolbarSettings: { items: [‘SubScript’]}
SuperScript SuperScript icon Makes the selected text as superscript (higher). toolbarSettings: { items: [‘SuperScript’’]}
Print Print icon Allows to print the editor content. toolbarSettings: { items: [‘Print’]}
FontName FontName icon Defines the fonts that appear under the Font Family DropDownList from the Rich Text Editor’s toolbar. toolbarSettings: { items: [‘FontName’]}
FontSize FontSize icon Defines the font sizes that appear under the Font Size DropDownList from the Rich Text Editor’s toolbar. toolbarSettings: { items: [‘FontSize’]}
FontColor FontColor icon Specifies an array of colors can be used in the colors popup for font color. toolbarSettings: { items: [‘FontColor’]}
BackgroundColor BackgroundColor icon Specifies an array of colors can be used in the colors popup for background color. toolbarSettings: { items: [‘BackgroundColor’]}
Format Format icon An Object with the options that will appear in the Paragraph Format dropdown from the toolbar. toolbarSettings: { items: [‘Formats’]}
StrikeThrough StrikeThrough icon Apply double line strike through formatting for the selected text. toolbarSettings: { items: [‘StrikeThrough’]}
InlineCode InlineCode icon Adds code-specific styling to selected text by highlighting it with a background color and using a monospace font for easy readability. toolbarSettings: { items: [‘InlineCode’]}
ClearFormat ClearFormat icon 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 FullScreen icon Stretches the editor to the maximum width and height of the browser window. toolbarSettings: { items: [‘FullScreen’]}
SourceCode SourceCode icon Rich Text Editor 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’]}
NumberFormatList NumberFormatList icon Allows to create list items with various list style types(numbered). toolbarSettings: { items: [‘NumberFormatList’]}
BulletFormatList BulletFormatList icon Allows to create list items with various list style types(bulleted). toolbarSettings: { items: [‘BulletFormatList’]}
JustifyLeft JustifyLeft icon Allows each line to begin at the same distance from the editor’s left-hand side. toolbarSettings: { items: [‘JustifyLeft’]}
JustifyCenter JustifyCenter icon There is an even space on each side of each line since the text is not aligned to the left or right margins. toolbarSettings: { items: [‘JustifyCenter’]}
JustifyRight JustifyRight icon Allows each line to end at the same distance from the editor’s right-hand side. toolbarSettings: { items: [‘JustifyRight’]}
JustifyFull JustifyFull icon The text is aligned with both right and left margins. toolbarSettings: { items: [‘JustifyFull’]}
Bold Bold icon Text that is thicker and darker than usual. toolbarSettings: { items: [‘Bold’]}
Italic Italic icon Shows a text that is leaned to the right. toolbarSettings: { items: [‘Italic’]}
Underline Underline icon The underline is added to the selected text. toolbarSettings: { items: [‘Underline’]}
ClearAll ClearAll icon Removes all styles that have been applied to the selected text. toolbarSettings: { items: [‘ClearAll’]}
Cut Cut icon Removes the text from its current location and places it into the clipboard. toolbarSettings: { items: [‘Cut’]}
Copy Copy icon The selected item is copied and pasted into the clipboard. toolbarSettings: { items: [‘Copy’]}
Paste Paste icon Allows you to insert a clipboard item into a specific location. toolbarSettings: { items: [‘Paste’]}
OpenLink OpenLink icon To open the URL link that is attached to the selected text. toolbarSettings: { items: [‘OpenLink’]}
EditLink EditLink icon Allows you to change the URL that has been attached to a specific item. toolbarSettings: { items: [‘EditLink’]}
CreateTable CreateTable icon Create a table with defined columns and rows. toolbarSettings: { items: [‘CreateTable’]}
RemoveTable RemoveTable icon Removes the selected table and its contents. toolbarSettings: { items: [‘TableRemove’]}
Replace Replace icon Replace the selected image with another image. toolbarSettings: { items: [‘Replace’]}
Align Alignment icon The image can be aligned to the right, left, or center. toolbarSettings: { items: [‘Align’]}
Remove Remove icon Allows to remove the selected image from the editor. toolbarSettings: { items: [‘Remove’]}
OpenImageLink OpenImageLink icon Opens the link that is attached to the selected image. toolbarSettings: { items: [‘OpenImageLink’]}
EditImageLink EditImageLink icon Allows to edit the link that is attached to the selected image. toolbarSettings: { items: [‘EditImageLink’]}
RemoveImageLink RemoveImageLink icon Removes the link that is attached to the selected image. toolbarSettings: { items: [‘RemoveImageLink’]}
InsertLink InsertLink icon Allows users to add a link to a particular item. toolbarSettings: { items: [‘InsertLink’]}
Display Display icon Allows you to choose whether an image should be shown inline or as a block. toolbarSettings: { items: [‘Display’]}
AltText AltText icon To display image description when an image on a Web page cannot be displayed. toolbarSettings: { items: [‘AltText’]}
Dimension Dimension icon Allows you to customize the image’s height and width. toolbarSettings: { items: [‘Dimension’]}
Maximize Maximize icon Stretches the editor to the maximum width and height of the browser window. toolbarSettings: { items: [‘Maximize’]}
Minimize Minimize icon Shrinks the editor to the default width and height. toolbarSettings: { items: [‘Minimize’]}
Preview Preview icon Allows to see how the editor’s content looks in a browser. toolbarSettings: { items: [‘Preview’]}
InsertCode InsertCode icon Represents preformatted text which is to be presented exactly as written in the HTML file. toolbarSettings: { items: [‘InsertCode’]}
RemoveLink RemoveLink icon Allows you to remove the applied link from the selected item. toolbarSettings: { items: [‘RemoveLink’]}
TableHeader TableHeader icon Allows you to add a table header. toolbarSettings: { items: [‘TableHeader’]}
TableColumns TableColumns icon Shows the dropdown to insert a column or delete the selected column. toolbarSettings: { items: [‘TableColumns’]}
TableRows TableRows icon Shows the dropdown to insert a row ors delete the selected row. toolbarSettings: { items: [‘TableRows’]}
TableCellHorizontalAlign TableCellHorizontalAlign icon Allows the table cell content to be aligned horizontally. toolbarSettings: { items: [‘TableCellHorizontalAlign’]}
TableCellVerticalAlign TableCellVerticalAlign icon Allows the table cell content to be aligned vertically. toolbarSettings: { items: [‘TableCellVerticalAlign’]}
TableEditProperties TableEditProperties icon Allows you to change the table width, padding, and cell spacing styles. toolbarSettings: { items: [‘TableEditProperties’]}

By default, tool will be arranged in following order.

NOTE

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.

<div id="rteSection">
    <ejs-richtexteditor id="customtool" created="created">
        <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
        <e-content-template>
            <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>
        </e-content-template>       
    </ejs-richtexteditor>
</div>
<ejs-dialog id="customTbarDialog" visible="false" header='Special Characters'  created="onDialogCreate" zIndex="1000" showCloseIcon="false" isModal="true" cssClass='e-rte-elements' overlayClick="dialogOverlay">
    <e-dialog-buttons>
        <e-dialog-dialogbutton buttonModel="ViewBag.button" click="onInsert"></e-dialog-dialogbutton>
        <e-dialog-dialogbutton buttonModel="ViewBag.button1" click="dialogOverlay"></e-dialog-dialogbutton>
    </e-dialog-buttons>
    <e-content-template>
        <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>
    </e-content-template>
</ejs-dialog>
<script>
    var defaultRTE, selection, ranges, dialog;

    function onDialogCreate() {
        dialog = this;
       dialog.element.style.maxHeight = '300px';
    }
    function onInsert() {
        var activeEle = dialog.element.querySelector('.char_block.e-active');
        if (defaultRTE.formatter.getUndoRedoStack().length === 0) {
            defaultRTE.formatter.saveData();
        }
        defaultRTE.executeCommand('insertText', 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();
    }
    function created() {
        defaultRTE = this;
        selection = new ej.richtexteditor.NodeSelection();
        var customBtn = defaultRTE.element.querySelector('#custom_tbar');
        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();
            };
        };
    }
</script>
<style>
    #customTbarDialog #special_char,
    #customTbarDialog .char_block {
        display: inline-block;
    }

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

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

    #customTbarDialog .char_block.e-active {
        outline: 1px solid #e3165b;
        border-color: #e3165b;
    }

    #customTbarDialog .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;
    }

    #custom_tbar .rtecustomtool {
        font-size: 18px;
    }

</style>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        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", "CreateTable", "|", "SourceCode", tools
        , "|", "Undo", "Redo"
            };
        ViewBag.button = new
        {
            content = "Insert",
            isPrimary = true
        };
        ViewBag.button1 = new
        {
            content = "Cancel"
        };

        return View();
    }
}

The focus will be lost while rendering the required component for the custom toolbar, causing it to render outside the Rich Text Editor and triggering a blur event. During that time, proper functionality will not be achievable. Therefore, it is recommended to set the cssClass property or class as e-rte-elements in the dependency component.

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, link and table 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 null
(Any toolbar items in the Rich Text Editor can be configured here).
table ‘TableHeader’, ‘TableRows’, ‘TableColumns’, ‘BackgroundColor’, ‘-‘, ‘TableRemove’, ‘Alignments’, ‘TableCellVerticalAlign’, ‘Styles’.

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 Rich Text Editor content as well as option to rotate the image through the quick toolbar.

<div class="control-section">
    <ejs-richtexteditor id="inline"  toolbarClick="onToolbarClick" created="onCreated">
        <e-richtexteditor-inlinemode enable="true" onSelection="true">
        </e-richtexteditor-inlinemode>
        <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
        <e-richtexteditor-quicktoolbarsettings image="@ViewBag.image"></e-richtexteditor-quicktoolbarsettings>
        <e-content-template>
            <p>
                The Rich Text Editor control 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>
        </e-content-template>
    </ejs-richtexteditor>
</div>
<style>
    .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-left::before {
        content: "\e341";
    }

    .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-right::before {
        content: "\e354";
    }
</style>
<script>
    function onCreated() {
        defaultRTE = this;
    }
    function onToolbarClick(e) {
        var nodeObj = new ej.richtexteditor.NodeSelection();
        var range = nodeObj.getRange(defaultRTE.contentModule.getDocument());
        var imgEle = nodeObj.getNodeCollection(range)[0];
        var transform;
        if (e.item.tooltipText === 'Rotate Right') {
            transform = (imgEle.style.transform === '') ? 0 :
                parseInt(imgEle.style.transform.split('(')[1].split(')')[0], 10);
            imgEle.style.transform = 'rotate(' + (transform + 90) + 'deg)';
        }
        else if (e.item.tooltipText === 'Rotate Left') {
            transform = (imgEle.style.transform === '') ? 0 :
                Math.abs(parseInt(imgEle.style.transform.split('(')[1].split(')')[0], 10));
            imgEle.style.transform = 'rotate(-' + (transform + 90) + 'deg)';
        }
    }
</script>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        ViewBag.items = new[] { "Bold", "Italic", "Underline",
            "Formats", "Alignments", "-", "OrderedList", "UnorderedList", "Image",
             "CreateLink" };
        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();
    }

}

See Also