Toolbar in JavaScript (ES5) RichTextEditor

JavaScript (ES5)

Search results

The RichTextEditor 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, you can customize the toolbar configurations easily to suit your needs.

To create RichTextEditor with Markdown editing feature, inject the Toolbar module to the RichTextEditor using the RichTextEditor.Inject(Toolbar) method.

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

Expand
MultiRow

The default mode of toolbarSettings.type it will hide the overflowing items in the next row. By clicking the expand arrow, view the overflowing toolbar items.

Source

Preview

index.js

index.html

// initialize RichTextEditor component
var defaultRTE = new ej.richtexteditor.RichTextEditor({
    height: 340,
    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>
        </ul>`,
    toolbarSettings: {
        type: 'Expand'
    }
});
// render initialized RichTextEditor
defaultRTE.appendTo('#defaultRTE');

<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 RichTextEditor</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="defaultRTE">
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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

Source

Preview

index.js

index.html

// initialize RichTextEditor component
var defaultRTE = new ej.richtexteditor.RichTextEditor({
  height: 340,
  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>
        </ul>`,
  toolbarSettings: {
    type: 'MultiRow'
  }});
// render initialized RichTextEditor
defaultRTE.appendTo('#defaultRTE');

<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 RichTextEditor</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="defaultRTE">
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

By default, toolbar is float at the top of the RichTextEditor on scrolling. It can be customized by specifying the offset of the floating toolbar from documents top position using floatingToolbarOffset.

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

Source

Preview

index.js

index.html

var defaultRTE = new ej.richtexteditor.RichTextEditor({
    height: 340,
    toolbarSettings: {
        enableFloating: false
    },
    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>\n    <p><b>Key features:</b></p>\n    <ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p></li>\n    <li><p>Capable of handling markdown editing.</p></li>\n    <li><p>Contains a modular library to load the necessary functionality on demand.</p></li>\n    <li><p>Provides a fully customizable toolbar.</p></li>\n    <li><p>Provides HTML view to edit the source directly for developers.</p></li>\n    <li><p>Supports third-party library integration.</p></li>\n    <li><p>Allows preview of modified content before saving it.</p></li>\n    <li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>\n   </ul>"
});
defaultRTE.appendTo('#defaultRTE');

var float = new ej.buttons.CheckBox({
    // set false for enable the checked state at initial rendering
    checked: false,
    label: 'Enable Floating',
    // bind change event
    change: function (args) {
        defaultRTE.toolbarSettings.enableFloating = args.checked;
        defaultRTE.dataBind();
    }
});
float.appendTo('#float');

<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 RichTextEditor</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="defaultRTE">
        </div>
        <input type="checkbox" id="float" checked="false">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

The following table lists the tools available in 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, tools will be arranged in following order.

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

The tools order can be customized 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 the toolbarSettings property. The command can be plain text, icon, or HTML template. The order and the group can also be defined 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 the toolbar of the rich text editor. The “Ω” command is added to insert special characters in the editor. By clicking the “Ω” command, it will show the special characters list, and then choose the character to be inserted in the editor.

The following code snippet illustrates custom tool with tooltip text which will be included in items field of the toolbarSettings property.

In the following sample, once RichTextEditor control is created, the concern event will be created the Dialog component can be rendered and target as RTE content.

{
    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" style="font-weight: 500;"> &#937;</div></button>'
}

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

Source

Preview

index.js

index.html

ej.base.enableRipple(true);

var defaultRTE = new ej.richtexteditor.RichTextEditor({
    height: 340,
    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>
    </ul>`,
    toolbarSettings: {
        items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList',
            'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode',
            {
                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" style="font-weight: 500;"> &#937;</div></button>'
            }, '|', 'Undo', 'Redo'
        ]
    },
    created: onCreate
});
defaultRTE.appendTo('#defaultRTE');

var selection = new ej.richtexteditor.NodeSelection();
var ranges;

function onCreate() {
    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('container'),
        showCloseIcon: false,
        isModal: true,
        height: 'auto',
        width: '500px',
        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();
    }
}

<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 RichTextEditor</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" class="e-rte-custom-tbar-section">
        <div id="defaultRTE">
        </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="&#xA0;">&#xA0;</div>
                <div class="char_block" title="&#xA1;">&#xA1;</div>
                <div class="char_block" title="&#xA2;">&#xA2;</div>
                <div class="char_block" title="&#xA3;">&#xA3;</div>
                <div class="char_block" title="&#xA4;">&#xA4;</div>
                <div class="char_block" title="&#xA5;">&#xA5;</div>
                <div class="char_block" title="&#x20B9;">&#x20B9;</div>
                <div class="char_block" title="&#xA6;">&#xA6;</div>
                <div class="char_block" title="&#xA7;">&#xA7;</div>
                <div class="char_block" title="&#xA8;">&#xA8;</div>
                <div class="char_block" title="&#xA9;">&#xA9;</div>
                <div class="char_block" title="&#xAA;">&#xAA;</div>
                <div class="char_block" title="&#xAB;">&#xAB;</div>
                <div class="char_block" title="&#xAC;">&#xAC;</div>
                <div class="char_block" title="&#xAD;">&#xAD;</div>
                <div class="char_block" title="&#xAE;">&#xAE;</div>
                <div class="char_block" title="&#xAF;">&#xAF;</div>
                <div class="char_block" title="&#xB0;">&#xB0;</div>
                <div class="char_block" title="&#xB1;">&#xB1;</div>
                <div class="char_block" title="&#xB2;">&#xB2;</div>
                <div class="char_block" title="&#xB3;">&#xB3;</div>
                <div class="char_block" title="&#xB4;">&#xB4;</div>
                <div class="char_block" title="&#xB5;">&#xB5;</div>
                <div class="char_block" title="&#xB6;">&#xB6;</div>
                <div class="char_block" title="&#xB7;">&#xB7;</div>
                <div class="char_block" title="&#xB8;">&#xB8;</div>
                <div class="char_block" title="&#xB9;">&#xB9;</div>
                <div class="char_block" title="&#xBA;">&#xBA;</div>
                <div class="char_block" title="&#xBB;">&#xBB;</div>
                <div class="char_block" title="&#xBC;">&#xBC;</div>
                <div class="char_block" title="&#xBD;">&#xBD;</div>
                <div class="char_block" title="&#xBE;">&#xBE;</div>
                <div class="char_block" title="&#xBF;">&#xBF;</div>
                <div class="char_block" title="&#xC0;">&#xC0;</div>
                <div class="char_block" title="&#xC1;">&#xC1;</div>
                <div class="char_block" title="&#xC2;">&#xC2;</div>
                <div class="char_block" title="&#xC3;">&#xC3;</div>
            </div>
        </div>
    </div>
<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;
    }
    #customTbarDialog {
        max-height: 250px !important;
    }
    .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;
    }

    #custom_tbar div{
        font-size: 16px;
    }

    .e-bigger #custom_tbar div{
        font-size: 18px;
    }
</style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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’.
table	‘TableHeader’, ‘TableRows’, ‘TableColumns’, ‘BackgroundColor’, ‘TableRemove’, ‘Alignments’, ‘TableCellVerticalAlign’, ‘Styles’.

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

The following sample demonstrates the option to insert the image to the RichTextEditor content as well as option to rotate the image through the quick toolbar. The image rotation functionalities have been achieved through the toolbarClick event.

Source

Preview

index.js

index.html

// initialize RichTextEditor component
var defaultRTE = new ej.richtexteditor.RichTextEditor({
    //Define the quicktoolbar items for image
    quickToolbarSettings: {
        image: [
        'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', 'OpenImageLink', '-',
        'EditImageLink', 'RemoveImageLink', 'Display', 'AltText', 'Dimension'
        ]
    },
    //Define toolbar items
    toolbarSettings: {
        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
        'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
        'LowerCase', 'UpperCase', '|',
        'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
        'Outdent', 'Indent', '|',
        'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
        'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
    }
});
// render initialized RichTextEditor
defaultRTE.appendTo('#defaultRTE');

<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 RichTextEditor</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="defaultRTE">
            <p>The rich text editor is WYSIWYG (&quot;what you see is what you get&quot;) editor useful to create and edit content, and return the valid <a href="https://ej2.syncfusion.com/home/" target="_blank">HTML markup</a> or <a href="https://ej2.syncfusion.com/home/" target="_blank">markdown</a> of the content</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>
              </ul>
        </div>
    </div>
    <style>
        .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-left::before {
            content: "\e76e";
        }
    
        .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-right::before {
            content: "\e726";
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

RichTextEditor features are segregated into individual feature-wise modules. To use quick toolbar, inject the quick toolbar module using the RichTextEditor.Inject(image, link).

Toolbar

Expand Toolbar

Multi-row Toolbar

Floating Toolbar

Toolbar items

Custom tool

Quick inline toolbar

See Also