JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Toolbar in JavaScript RichTextEditor control

17 Sep 2021 / 14 minutes to read

The Rich Text Editor 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 Rich Text Editor with Markdown editing 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 toolbarSettings.type property. The types of toolbar are:

  1. Expand
  2. MultiRow

Expand Toolbar

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.ts
index.html
Copied to clipboard
import { RichTextEditor, Toolbar, HtmlEditor } from '@syncfusion/ej2-richtexteditor';

RichTextEditor.Inject(Toolbar, HtmlEditor);

let defaultRTE: RichTextEditor = new 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'
}});
defaultRTE.appendTo('#defaultRTE');
Copied to clipboard
<!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="//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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='defaultRTE'>
        </div>
    </div>
</body>

</html>

Multi-row Toolbar

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

Source
Preview
index.ts
index.html
Copied to clipboard
import { RichTextEditor, Toolbar, HtmlEditor } from '@syncfusion/ej2-richtexteditor';

RichTextEditor.Inject(Toolbar, HtmlEditor);

let defaultRTE: RichTextEditor = new 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>
    <li><p>Contains undo/redo manager.</p></li>
    <li><p>Creates bulleted and numbered lists.</p></li>
    </ul>`,
  toolbarSettings: {
type: 'MultiRow'
  }});
defaultRTE.appendTo('#defaultRTE');
Copied to clipboard
<!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="//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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='defaultRTE'>
        </div>
    </div>
</body>

</html>

Floating Toolbar

By default, toolbar is float at the top of the Rich Text Editor 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.ts
index.html
Copied to clipboard
import { RichTextEditor, Toolbar, HtmlEditor } from '@syncfusion/ej2-richtexteditor';
import { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';

RichTextEditor.Inject(Toolbar, HtmlEditor);

let defaultRTE: RichTextEditor = new 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>
<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>`});
defaultRTE.appendTo('#defaultRTE');

let float: CheckBox = new CheckBox({
// set false for enable the checked state at initial rendering
checked: false,
label: 'Enable Floating',
// bind change event
change: (args: ChangeEventArgs) => {
    defaultRTE.toolbarSettings.enableFloating = (args as any).checked;
    defaultRTE.dataBind();
}
});
float.appendTo('#float');
Copied to clipboard
<!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="//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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

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

</html>

Toolbar items

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 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 Allows to create list items with various list style types(numbered). toolbarSettings: { items: [‘NumberFormatList’]}
BulletFormatList Allows to create list items with various list style types(bulleted). toolbarSettings: { items: [‘BulletFormatList’]}
JustifyLeft Allows each line to begin at the same distance from the editor’s left-hand side. toolbarSettings: { items: [‘JustifyLeft’]}
JustifyCenter 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 Allows each line to end at the same distance from the editor’s right-hand side. toolbarSettings: { items: [‘JustifyRight’]}
JustifyFull The text is aligned with both right and left margins. toolbarSettings: { items: [‘JustifyFull’]}
Bold Text that is thicker and darker than usual. toolbarSettings: { items: [‘Bold’]}
Italic Shows a text that is leaned to the right. toolbarSettings: { items: [‘Italic’]}
Underline The underline is added to the selected text. toolbarSettings: { items: [‘Underline’]}
ClearAll Removes all styles that have been applied to the selected text. toolbarSettings: { items: [‘ClearAll’]}
Cut Removes the text from its current location and places it into the clipboard. toolbarSettings: { items: [‘Cut’]}
Copy The selected item is copied and pasted into the clipboard. toolbarSettings: { items: [‘Copy’]}
Paste Allows you to insert a clipboard item into a specific location. toolbarSettings: { items: [‘Paste’]}
OpenLink To open the URL link that is attached to the selected text. toolbarSettings: { items: [‘OpenLink’]}
EditLink Allows you to change the URL that has been attached to a specific item. toolbarSettings: { items: [‘EditLink’]}
CreateTable Create a table with defined columns and rows. toolbarSettings: { items: [‘CreateTable’]}
RemoveTable Removes the selected table and its contents. toolbarSettings: { items: [‘RemoveTable’]}
Replace Replace the selected image with another image. toolbarSettings: { items: [‘Replace’]}
Align The image can be aligned to the right, left, or center. toolbarSettings: { items: [‘Align’]}
Remove Allows to remove the selected image from the editor. toolbarSettings: { items: [‘Remove’]}
OpenImageLink Opens the link that is attached to the selected image. toolbarSettings: { items: [‘OpenImageLink’]}
EditImageLink Allows to edit the link that is attached to the selected image. toolbarSettings: { items: [‘EditImageLink’]}
RemoveImageLink Removes the link that is attached to the selected image. toolbarSettings: { items: [‘RemoveImageLink’]}
InsertLink Allows users to add a link to a particular item. toolbarSettings: { items: [‘InsertLink’]}
Display Allows you to choose whether an image should be shown inline or as a block. toolbarSettings: { items: [‘Display’]}
AltText To display image description when an image on a Web page cannot be displayed. toolbarSettings: { items: [‘AltText’]}
Dimension Allows you to customize the image’s height and width. toolbarSettings: { items: [‘Dimension’]}
Maximize Stretches the editor to the maximum width and height of the browser window. toolbarSettings: { items: [‘Maximize’]}
Minimize Shrinks the editor to the default width and height. toolbarSettings: { items: [‘Minimize’]}
Preview Allows to see how the editor’s content looks in a browser. toolbarSettings: { items: [‘Preview’]}
InsertCode Represents preformatted text which is to be presented exactly as written in the HTML file. toolbarSettings: { items: [‘InsertCode’]}
RemoveLink Allows you to remove the applied link from the selected item. toolbarSettings: { items: [‘RemoveLink’]}
TableHeader Allows you to add a table header. toolbarSettings: { items: [‘TableHeader’]}
TableColumns Shows the dropdown to insert a column or delete the selected column. toolbarSettings: { items: [‘TableColumns’]}
TableRows Shows the dropdown to insert a row ors delete the selected row. toolbarSettings: { items: [‘TableRows’]}
TableCellHorizontalAlign Allows the table cell content to be aligned horizontally. toolbarSettings: { items: [‘TableCellHorizontalAlign’]}
TableCellVerticalAlign Allows the table cell content to be aligned vertically. toolbarSettings: { items: [‘TableCellVerticalAlign’]}
TableEditProperties Allows you to change the table width, padding, and cell spacing styles. toolbarSettings: { items: [‘TableEditProperties’]}

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 Rich Text Editor control is created, the concern event will be created the Dialog component can be rendered and target as RTE content.

Copied to clipboard
{
tooltipText: 'Insert Symbol',
undo: true,
click: function() {
},
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.ts
index.html
Copied to clipboard
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

import { RichTextEditor, Toolbar, Link, NodeSelection, Image, QuickToolbar, HtmlEditor } from '@syncfusion/ej2-richtexteditor';
import { Dialog } from '@syncfusion/ej2-popups';
RichTextEditor.Inject(Toolbar, Link, Image, QuickToolbar, HtmlEditor);
let dialog: Dialog;
let defaultRTE: RichTextEditor = new 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',
            undo: true,
            click: function() {
                defaultRTE.focusIn();
                dialog.element.style.display = '';
                ranges = selection.getRange(document);
                dialog.width = defaultRTE.element.offsetWidth * 0.5;
                dialog.dataBind();
                dialog.show();
            },
            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');
let selection: NodeSelection = new NodeSelection();
let ranges: Range;

function onCreate(): void {
  let customBtn: HTMLElement = defaultRTE.element.querySelector('#custom_tbar') as HTMLElement;
  let dialogCtn: HTMLElement = document.getElementById('rteSpecial_char');
  // Initialization of Dialog
  dialog = new 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 = (e: Event) => {
dialog.element.style.display = '';
ranges = selection.getRange(document);
dialog.width = defaultRTE.element.offsetWidth * 0.5;
dialog.dataBind();
dialog.show();
let dialogCtn: HTMLElement = document.getElementById('rteSpecial_char');
dialogCtn.onclick = (e: Event) => {
    let target: HTMLElement = e.target as HTMLElement;
    let activeEle: HTMLElement = 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');
        }
    }
};
  }

  function onInsert(): void {
let activeEle: HTMLElement = dialog.element.querySelector('.char_block.e-active');
if (activeEle) {
    defaultRTE.executeCommand('insertText', activeEle.textContent , {undo: true});
}
dialogOverlay();
  }

  function dialogOverlay(): void {
let activeEle: HTMLElement = dialog.element.querySelector('.char_block.e-active');
if (activeEle) {
    activeEle.classList.remove('e-active');
}
dialog.hide();
  }
}
Copied to clipboard
<!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="//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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <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>
</body>

</html>

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 (Deprecated) ‘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 Rich Text Editor 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.ts
index.html
Copied to clipboard
import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar);
let defaultRTE: RichTextEditor = new RichTextEditor({
  height: 340,
  quickToolbarSettings: {
     image: [
        'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', 'OpenImageLink', '-',
        'EditImageLink', 'RemoveImageLink', 'Display', 'AltText', 'Dimension'
     ]
   },
  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']
   }

});
  defaultRTE.appendTo('#defaultRTE');
Copied to clipboard
<!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="//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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='defaultRTE'>
            <p>The Rich Text Editor is WYSIWYG ("what you see is what you get") 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>
</body>

</html>

Rich Text Editor features are segregated into individual feature-wise modules. To use quick toolbar, inject the quick toolbar module using the RichTextEditor.Inject(Image, Link).

See Also

Previous
Next