Custom Toolbar Items in JavaScript Rich Text Editor control

18 Nov 20181 minute to read

The Rich Text Editor allows you to customize the toolbar using the toolbarSettings property. You can add custom commands with text, icons, or HTML templates and define their position in the toolbar.

Adding a custom command

This example demonstrates how to add a custom “Ω” command to the toolbar for inserting special characters. Clicking the Ω icon opens a special character list, allowing users to insert symbols into the editor.

Custom toolbar configuration

To add a custom tool with a tooltip, define it in the items field of the toolbarSettings property.

{
    tooltipText: 'Insert Symbol',
    // To disable the custom toolbar items on source code view
    command: 'Custom',
    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>'
}

When rendering any control for the custom toolbar, like a dropdown, the focus may be lost, causing it to render outside the Rich Text Editor and triggering a blur event. This can interfere with proper functionalities like cursor focus. To prevent this issue, it is recommended to assign the e-rte-elements class to the control rendered in the custom toolbar.

Enabling and disabling toolbar items

You can use the enableToolbarItem and disableToolbarItem methods to control the state of toolbar items. This methods takes a single item or an array of items as parameter.

You can add the command name Custom to disable the custom toolbar items on source code view and other quick toolbar operations.