Toolbar in EJ2 JavaScript Rich Text Editor control

16 May 202521 minutes to read

The Syncfusion EJ2 JavaScript Rich Text Editor provides a powerful toolbar that enables users to format, style, and edit content efficiently. The toolbar includes essential editing tools such as bold, italic, underline, alignment, and lists, along with customization options to suit different use cases.

To create Rich Text Editor with Toolbar feature, inject the Toolbar module to the Rich Text Editor using the RichTextEditor.Inject(Toolbar) method.

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
  3. Scrollable

Expanding the toolbar

The default mode of the toolbar is Expand, configured through toolbarSettings with type: 'Expand'. This mode hides any overflowing toolbar items in the next row, which can viewed by clicking the expand arrow.

// initialize Rich Text Editor component
var editor = 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',
        items: [
            'Undo',
            'Redo',
            '|',
            'Bold',
            'Italic',
            'Underline',
            'StrikeThrough',
            'InlineCode',
            'SuperScript',
            'SubScript',
            '|',
            'FontName',
            'FontSize',
            'FontColor',
            'BackgroundColor',
            '|',
            'LowerCase',
            'UpperCase',
            '|',
            'Formats',
            'Alignments',
            'Blockquote',
            '|',
            'NumberFormatList',
            'BulletFormatList',
            '|',
            'Outdent',
            'Indent',
            '|',
            'CreateLink',
            'Image',
            'CreateTable',
            '|',
            'ClearFormat',
            'SourceCode',
          ],
    }
});
// render initialized Rich Text Editor
editor.appendTo('#editor');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Rich Text Editor</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="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-richtexteditor/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="editor">
        </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>

Configuring a multi-row toolbar

Setting the type as MultiRow in toolbarSettings will arrange the toolbar items across multiple rows, displaying all configured toolbar items.

// initialize Rich Text Editor component
var editor = 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',
      items: [
          'Undo',
          'Redo',
          '|',
          'Bold',
          'Italic',
          'Underline',
          'StrikeThrough',
          'InlineCode',
          'SuperScript',
          'SubScript',
          '|',
          'FontName',
          'FontSize',
          'FontColor',
          'BackgroundColor',
          '|',
          'LowerCase',
          'UpperCase',
          '|',
          'Formats',
          'Alignments',
          'Blockquote',
          '|',
          'NumberFormatList',
          'BulletFormatList',
          '|',
          'Outdent',
          'Indent',
          '|',
          'CreateLink',
          'Image',
          'CreateTable',
          '|',
          'ClearFormat',
          'SourceCode',
        ],
  }
});
// render initialized Rich Text Editor
editor.appendTo('#editor');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Rich Text Editor</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="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-richtexteditor/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="editor">
        </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>

Implementing a scrollable toolbar

Setting the type to Scrollable in toolbarSettings will display the toolbar items in a single line, enabling horizontal scrolling in the toolbar.

// initialize Rich Text Editor component
var editor = 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: 'Scrollable',
      items: [
          'Undo',
          'Redo',
          '|',
          'Bold',
          'Italic',
          'Underline',
          'StrikeThrough',
          'InlineCode',
          'SuperScript',
          'SubScript',
          '|',
          'FontName',
          'FontSize',
          'FontColor',
          'BackgroundColor',
          '|',
          'LowerCase',
          'UpperCase',
          '|',
          'Formats',
          'Alignments',
          'Blockquote',
          '|',
          'NumberFormatList',
          'BulletFormatList',
          '|',
          'Outdent',
          'Indent',
          '|',
          'CreateLink',
          'Image',
          'CreateTable',
          '|',
          'ClearFormat',
          'SourceCode',
        ],
  }
});
// render initialized Rich Text Editor
editor.appendTo('#editor');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Rich Text Editor</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="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-richtexteditor/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="editor">
        </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>

Creating a sticky toolbar

By default, the toolbar remains fixed at the top of the Rich Text Editor when scrolling. You can customize the position of this sticky toolbar by setting the floatingToolbarOffset to adjust its offset from the top of the document.

Additionally, you can enable or disable the floating toolbar using the enableFloating property.

var editor = 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>"
});
editor.appendTo('#editor');

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) {
        editor.toolbarSettings.enableFloating = args.checked;
        editor.dataBind();
    }
});
float.appendTo('#float');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Rich Text Editor</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="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-richtexteditor/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="editor">
        </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>

See also