Custom Toolbar Items in React Rich Text Editor Component
4 Sep 202524 minutes to read
The React Syncfusion 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.
{
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;"> Ω</div></button>',
click: this.onClick.bind(this),
undo: true,
// To disable the custom toolbar items on source code view
command: 'Custom',
tooltipText: 'Insert Symbol'
}[Class-component]
/**
* Rich Text Editor - Custom Tool Sample
*/
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { HtmlEditor, Image, Inject, Link, NodeSelection, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
rteObj;
// set the value to Rich Text Editor
template = `<div style="display:block;"><p style="margin-right:10px">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></div>`;
selection = new NodeSelection();
ranges;
dialogObj;
// Rich Text Editor items list
items = ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList',
'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode',
{
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;"> Ω</div></button>',
undo: true,
// To disable the custom toolbar items on source code view
command: 'Custom',
click: this.onClick.bind(this),
tooltipText: 'Insert Symbol'
}, '|', 'Undo', 'Redo'
];
// Rich Text Editor ToolbarSettings
toolbarSettings = {
items: this.items
};
dlgButtons = [
{ buttonModel: { content: "Insert", isPrimary: true }, click: this.onInsert.bind(this) },
{ buttonModel: { content: 'Cancel' }, click: this.onCancel }
];
header = 'Special Characters';
target = document.getElementById('rteSection');
height = 'auto';
dialogCreate() {
const dialogCtn = document.getElementById('rteSpecial_char');
dialogCtn.onclick = (e) => {
const target = e.target;
const activeEle = this.dialogObj.element.querySelector('.char_block.e-active');
if (target.classList.contains('char_block')) {
target.classList.add('e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
}
};
}
onInsert() {
const activeEle = this.dialogObj.element.querySelector('.char_block.e-active');
if (activeEle) {
this.ranges.insertNode(document.createTextNode(activeEle.textContent));
}
this.dialogOverlay();
}
onClick() {
this.ranges = this.selection.getRange(document);
this.dialogObj.width = this.rteObj.element.offsetWidth * 0.5;
this.dialogObj.content = document.getElementById('rteSpecial_char');
this.dialogObj.dataBind();
this.dialogObj.show();
}
dialogOverlay() {
const activeEle = this.dialogObj.element.querySelector('.char_block.e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
this.dialogObj.hide();
}
onCancel(e) {
const activeEle = this.element.querySelector('.char_block.e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
this.hide();
}
render() {
const hideDiv = { display: "none" };
return (<div className='control-pane'>
<div className='control-section e-rte-custom-tbar-section' id="rteCustomTool">
<div className='rte-control-section' id='rteSection'>
<RichTextEditorComponent id="defaultRTE" ref={(scope) => { this.rteObj = scope; }} valueTemplate={this.template} toolbarSettings={this.toolbarSettings}>
<Inject services={[HtmlEditor, Toolbar, Link, Image, QuickToolbar]}/>
</RichTextEditorComponent>
<DialogComponent id='customTbarDlg' ref={(scope) => { this.dialogObj = scope; }} buttons={this.dlgButtons} overlayClick={this.dialogOverlay = this.dialogOverlay.bind(this)} header={this.header} visible={false} showCloseIcon={false} target={'#rteSection'} height={this.height} created={this.dialogCreate = this.dialogCreate.bind(this)} isModal={true} cssClass={'e-rte-elements'}/>
<div id="customTbarDialog" style={hideDiv}>
<div id="rteSpecial_char">
<div className="char_block" title="^">^</div>
<div className="char_block" title="_">_</div>
<div className="char_block" title="`">`</div>
<div className="char_block" title="{">{</div>
<div className="char_block" title="|">|</div>
<div className="char_block" title="}">}</div>
<div className="char_block" title="~">~</div>
<div className="char_block" title=" "> </div>
<div className="char_block" title="¡">¡</div>
<div className="char_block" title="¢">¢</div>
<div className="char_block" title="£">£</div>
<div className="char_block" title="¤">¤</div>
<div className="char_block" title="¥">¥</div>
<div className="char_block" title="₹">₹</div>
<div className="char_block" title="¦">¦</div>
<div className="char_block" title="§">§</div>
<div className="char_block" title="¨">¨</div>
<div className="char_block" title="©">©</div>
<div className="char_block" title="ª">ª</div>
<div className="char_block" title="«">«</div>
<div className="char_block" title="¬">¬</div>
<div className="char_block" title="­">­</div>
<div className="char_block" title="®">®</div>
<div className="char_block" title="¯">¯</div>
<div className="char_block" title="°">°</div>
<div className="char_block" title="±">±</div>
<div className="char_block" title="²">²</div>
<div className="char_block" title="³">³</div>
<div className="char_block" title="´">´</div>
<div className="char_block" title="µ">µ</div>
<div className="char_block" title="¶">¶</div>
<div className="char_block" title="·">·</div>
<div className="char_block" title="¸">¸</div>
<div className="char_block" title="¹">¹</div>
<div className="char_block" title="º">º</div>
<div className="char_block" title="»">»</div>
<div className="char_block" title="¼">¼</div>
<div className="char_block" title="½">½</div>
<div className="char_block" title="¾">¾</div>
<div className="char_block" title="¿">¿</div>
<div className="char_block" title="À">À</div>
<div className="char_block" title="Á">Á</div>
<div className="char_block" title="Â">Â</div>
<div className="char_block" title="Ã">Ã</div>
</div>
</div>
</div>
</div>
</div>);
}
}
export default App;/**
* Rich Text Editor - Custom Tool Sample
*/
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { HtmlEditor, Image, Inject, Link, NodeSelection, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
public rteObj: RichTextEditorComponent;
// set the value to Rich Text Editor
public template: string = `<div style="display:block;"><p style="margin-right:10px">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></div>`;
public selection: NodeSelection = new NodeSelection();
public ranges: Range;
public dialogObj: DialogComponent;
// Rich Text Editor items list
public items: object = ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList',
'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode',
{
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;"> Ω</div></button>',
undo: true,
// To disable the custom toolbar items on source code view
command: 'Custom',
click: this.onClick.bind(this),
tooltipText: 'Insert Symbol'
}, '|', 'Undo', 'Redo'
];
// Rich Text Editor ToolbarSettings
public toolbarSettings: object = {
items: this.items
};
public dlgButtons: any = [
{ buttonModel: { content: "Insert", isPrimary: true }, click: this.onInsert.bind(this) },
{ buttonModel: { content: 'Cancel' }, click: this.onCancel }
];
public header: string = 'Special Characters';
public target: Element = document.getElementById('rteSection') as any;
public height: any = 'auto';
public dialogCreate(): void {
const dialogCtn: HTMLElement = document.getElementById('rteSpecial_char') as HTMLElement;
dialogCtn.onclick = (e: Event) => {
const target: HTMLElement = e.target as HTMLElement;
const activeEle: Element = this.dialogObj.element.querySelector('.char_block.e-active') as HTMLElement;
if (target.classList.contains('char_block')) {
target.classList.add('e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
}
};
}
public onInsert(): void {
const activeEle: Element = this.dialogObj.element.querySelector('.char_block.e-active') as any;
if (activeEle) {
this.ranges.insertNode(document.createTextNode(activeEle.textContent as string));
}
this.dialogOverlay();
}
public onClick(): void {
this.ranges = this.selection.getRange(document);
this.dialogObj.width = (this.rteObj as any).element.offsetWidth * 0.5;
this.dialogObj.content = document.getElementById('rteSpecial_char') as HTMLElement;
this.dialogObj.dataBind();
this.dialogObj.show();
}
public dialogOverlay(): void {
const activeEle: Element = this.dialogObj.element.querySelector('.char_block.e-active') as HTMLElement;
if (activeEle) {
activeEle.classList.remove('e-active');
}
this.dialogObj.hide();
}
public onCancel(e: any): void {
const activeEle: Element = (this as any).element.querySelector('.char_block.e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
(this as any).hide();
}
public render() {
const hideDiv = { display: "none" };
return (
<div className='control-pane'>
<div className='control-section e-rte-custom-tbar-section' id="rteCustomTool">
<div className='rte-control-section' id='rteSection'>
<RichTextEditorComponent id="defaultRTE" ref={(scope) => { this.rteObj = scope! }}
valueTemplate={this.template} toolbarSettings={this.toolbarSettings}>
<Inject services={[HtmlEditor, Toolbar, Link, Image, QuickToolbar]} />
</RichTextEditorComponent>
<DialogComponent id='customTbarDlg' ref={(scope) => { this.dialogObj = scope! }}
buttons={this.dlgButtons} overlayClick={this.dialogOverlay = this.dialogOverlay.bind(this) } header={this.header} visible={false}
showCloseIcon={false} target={'#rteSection'} height={this.height} created={this.dialogCreate = this.dialogCreate.bind(this)} isModal={true} cssClass={'e-rte-elements'} />
<div id="customTbarDialog" style={hideDiv}>
<div id="rteSpecial_char">
<div className="char_block" title="^">^</div>
<div className="char_block" title="_">_</div>
<div className="char_block" title="`">`</div>
<div className="char_block" title="{">{</div>
<div className="char_block" title="|">|</div>
<div className="char_block" title="}">}</div>
<div className="char_block" title="~">~</div>
<div className="char_block" title=" "> </div>
<div className="char_block" title="¡">¡</div>
<div className="char_block" title="¢">¢</div>
<div className="char_block" title="£">£</div>
<div className="char_block" title="¤">¤</div>
<div className="char_block" title="¥">¥</div>
<div className="char_block" title="₹">₹</div>
<div className="char_block" title="¦">¦</div>
<div className="char_block" title="§">§</div>
<div className="char_block" title="¨">¨</div>
<div className="char_block" title="©">©</div>
<div className="char_block" title="ª">ª</div>
<div className="char_block" title="«">«</div>
<div className="char_block" title="¬">¬</div>
<div className="char_block" title="­">­</div>
<div className="char_block" title="®">®</div>
<div className="char_block" title="¯">¯</div>
<div className="char_block" title="°">°</div>
<div className="char_block" title="±">±</div>
<div className="char_block" title="²">²</div>
<div className="char_block" title="³">³</div>
<div className="char_block" title="´">´</div>
<div className="char_block" title="µ">µ</div>
<div className="char_block" title="¶">¶</div>
<div className="char_block" title="·">·</div>
<div className="char_block" title="¸">¸</div>
<div className="char_block" title="¹">¹</div>
<div className="char_block" title="º">º</div>
<div className="char_block" title="»">»</div>
<div className="char_block" title="¼">¼</div>
<div className="char_block" title="½">½</div>
<div className="char_block" title="¾">¾</div>
<div className="char_block" title="¿">¿</div>
<div className="char_block" title="À">À</div>
<div className="char_block" title="Á">Á</div>
<div className="char_block" title="Â">Â</div>
<div className="char_block" title="Ã">Ã</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default App;[Functional-component]
/**
* Rich Text Editor - Custom Tool Sample
*/
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { HtmlEditor, Image, Inject, Link, NodeSelection, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let rteObj;
// set the value to Rich Text Editor
let template = `<div style="display:block;"><p style="margin-right:10px">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></div>`;
let selection = new NodeSelection();
let ranges;
let dialogObj;
// Rich Text Editor items list
let items = ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList',
'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode',
{
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;"> Ω</div></button>',
undo: true,
// To disable the custom toolbar items on source code view
command: 'Custom',
click: onClick.bind(this),
tooltipText: 'Insert Symbol'
}, '|', 'Undo', 'Redo'
];
// Rich Text Editor ToolbarSettings
let toolbarSettings = {
items: items
};
let dlgButtons = [
{ buttonModel: { content: "Insert", isPrimary: true }, click: onInsert.bind(this) },
{ buttonModel: { content: 'Cancel' }, click: onCancel }
];
let header = 'Special Characters';
let target = document.getElementById('rteSection');
let height = 'auto';
function dialogCreate() {
const dialogCtn = document.getElementById('rteSpecial_char');
dialogCtn.onclick = (e) => {
const target = e.target;
const activeEle = dialogObj.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() {
const activeEle = dialogObj.element.querySelector('.char_block.e-active');
if (activeEle) {
ranges.insertNode(document.createTextNode(activeEle.textContent));
}
dialogOverlay();
}
function onClick() {
ranges = selection.getRange(document);
dialogObj.width = rteObj.element.offsetWidth * 0.5;
dialogObj.content = document.getElementById('rteSpecial_char');
dialogObj.dataBind();
dialogObj.show();
}
function dialogOverlay() {
const activeEle = dialogObj.element.querySelector('.char_block.e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
dialogObj.hide();
}
function onCancel(e) {
const activeEle = this.element.querySelector('.char_block.e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
this.hide();
}
const hideDiv = { display: "none" };
return (<div className='control-pane'>
<div className='control-section e-rte-custom-tbar-section' id="rteCustomTool">
<div className='rte-control-section' id='rteSection'>
<RichTextEditorComponent id="defaultRTE" ref={(scope) => { rteObj = scope; }} valueTemplate={template} toolbarSettings={toolbarSettings}>
<Inject services={[HtmlEditor, Toolbar, Link, Image, QuickToolbar]}/>
</RichTextEditorComponent>
<DialogComponent id='customTbarDlg' ref={(scope) => { dialogObj = scope; }} buttons={dlgButtons} overlayClick={dialogOverlay.bind(this)} header={header} visible={false} showCloseIcon={false} target={'#rteSection'} height={height} created={dialogCreate.bind(this)} isModal={true} cssClass={'e-rte-elements'}/>
<div id="customTbarDialog" style={hideDiv}>
<div id="rteSpecial_char">
<div className="char_block" title="^">^</div>
<div className="char_block" title="_">_</div>
<div className="char_block" title="`">`</div>
<div className="char_block" title="{">{</div>
<div className="char_block" title="|">|</div>
<div className="char_block" title="}">}</div>
<div className="char_block" title="~">~</div>
<div className="char_block" title=" "> </div>
<div className="char_block" title="¡">¡</div>
<div className="char_block" title="¢">¢</div>
<div className="char_block" title="£">£</div>
<div className="char_block" title="¤">¤</div>
<div className="char_block" title="¥">¥</div>
<div className="char_block" title="₹">₹</div>
<div className="char_block" title="¦">¦</div>
<div className="char_block" title="§">§</div>
<div className="char_block" title="¨">¨</div>
<div className="char_block" title="©">©</div>
<div className="char_block" title="ª">ª</div>
<div className="char_block" title="«">«</div>
<div className="char_block" title="¬">¬</div>
<div className="char_block" title="­">­</div>
<div className="char_block" title="®">®</div>
<div className="char_block" title="¯">¯</div>
<div className="char_block" title="°">°</div>
<div className="char_block" title="±">±</div>
<div className="char_block" title="²">²</div>
<div className="char_block" title="³">³</div>
<div className="char_block" title="´">´</div>
<div className="char_block" title="µ">µ</div>
<div className="char_block" title="¶">¶</div>
<div className="char_block" title="·">·</div>
<div className="char_block" title="¸">¸</div>
<div className="char_block" title="¹">¹</div>
<div className="char_block" title="º">º</div>
<div className="char_block" title="»">»</div>
<div className="char_block" title="¼">¼</div>
<div className="char_block" title="½">½</div>
<div className="char_block" title="¾">¾</div>
<div className="char_block" title="¿">¿</div>
<div className="char_block" title="À">À</div>
<div className="char_block" title="Á">Á</div>
<div className="char_block" title="Â">Â</div>
<div className="char_block" title="Ã">Ã</div>
</div>
</div>
</div>
</div>
</div>);
}
export default App;/**
* Rich Text Editor - Custom Tool Sample
*/
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { HtmlEditor, Image, Inject, Link, NodeSelection, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App(){
let rteObj: RichTextEditorComponent;
// set the value to Rich Text Editor
let template: string = `<div style="display:block;"><p style="margin-right:10px">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></div>`;
let selection: NodeSelection = new NodeSelection();
let ranges: Range;
let dialogObj: DialogComponent;
// Rich Text Editor items list
let items: object = ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList',
'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode',
{
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;"> Ω</div></button>',
undo: true,
// To disable the custom toolbar items on source code view
command: 'Custom',
click: onClick.bind(this),
tooltipText: 'Insert Symbol'
}, '|', 'Undo', 'Redo'
];
// Rich Text Editor ToolbarSettings
let toolbarSettings: object = {
items: items
};
let dlgButtons: any = [
{ buttonModel: { content: "Insert", isPrimary: true }, click: onInsert.bind(this) },
{ buttonModel: { content: 'Cancel' }, click: onCancel }
];
let header: string = 'Special Characters';
let target: Element = document.getElementById('rteSection') as any;
let height: any = 'auto';
function dialogCreate(): void {
const dialogCtn: HTMLElement = document.getElementById('rteSpecial_char') as HTMLElement;
dialogCtn.onclick = (e: Event) => {
const target: HTMLElement = e.target as HTMLElement;
const activeEle: Element = dialogObj.element.querySelector('.char_block.e-active') as HTMLElement;
if (target.classList.contains('char_block')) {
target.classList.add('e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
}
};
}
function onInsert(): void {
const activeEle: Element = dialogObj.element.querySelector('.char_block.e-active') as any;
if (activeEle) {
ranges.insertNode(document.createTextNode(activeEle.textContent as string));
}
dialogOverlay();
}
function onClick(): void {
ranges = selection.getRange(document);
dialogObj.width = (rteObj as any).element.offsetWidth * 0.5;
dialogObj.content = document.getElementById('rteSpecial_char') as HTMLElement;
dialogObj.dataBind();
dialogObj.show();
}
function dialogOverlay(): void {
const activeEle: Element = dialogObj.element.querySelector('.char_block.e-active') as HTMLElement;
if (activeEle) {
activeEle.classList.remove('e-active');
}
dialogObj.hide();
}
function onCancel(e: any): void {
const activeEle: Element = (this as any).element.querySelector('.char_block.e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
(this as any).hide();
}
const hideDiv = { display: "none" };
return (
<div className='control-pane'>
<div className='control-section e-rte-custom-tbar-section' id="rteCustomTool">
<div className='rte-control-section' id='rteSection'>
<RichTextEditorComponent id="defaultRTE" ref={(scope) => { rteObj = scope! }}
valueTemplate={template} toolbarSettings={toolbarSettings}>
<Inject services={[HtmlEditor, Toolbar, Link, Image, QuickToolbar]} />
</RichTextEditorComponent>
<DialogComponent id='customTbarDlg' ref={(scope) => { dialogObj = scope! }}
buttons={dlgButtons} overlayClick={dialogOverlay.bind(this) } header={header} visible={false}
showCloseIcon={false} target={'#rteSection'} height={height} created={dialogCreate.bind(this)} isModal={true} cssClass={'e-rte-elements'}/>
<div id="customTbarDialog" style={hideDiv}>
<div id="rteSpecial_char">
<div className="char_block" title="^">^</div>
<div className="char_block" title="_">_</div>
<div className="char_block" title="`">`</div>
<div className="char_block" title="{">{</div>
<div className="char_block" title="|">|</div>
<div className="char_block" title="}">}</div>
<div className="char_block" title="~">~</div>
<div className="char_block" title=" "> </div>
<div className="char_block" title="¡">¡</div>
<div className="char_block" title="¢">¢</div>
<div className="char_block" title="£">£</div>
<div className="char_block" title="¤">¤</div>
<div className="char_block" title="¥">¥</div>
<div className="char_block" title="₹">₹</div>
<div className="char_block" title="¦">¦</div>
<div className="char_block" title="§">§</div>
<div className="char_block" title="¨">¨</div>
<div className="char_block" title="©">©</div>
<div className="char_block" title="ª">ª</div>
<div className="char_block" title="«">«</div>
<div className="char_block" title="¬">¬</div>
<div className="char_block" title="­">­</div>
<div className="char_block" title="®">®</div>
<div className="char_block" title="¯">¯</div>
<div className="char_block" title="°">°</div>
<div className="char_block" title="±">±</div>
<div className="char_block" title="²">²</div>
<div className="char_block" title="³">³</div>
<div className="char_block" title="´">´</div>
<div className="char_block" title="µ">µ</div>
<div className="char_block" title="¶">¶</div>
<div className="char_block" title="·">·</div>
<div className="char_block" title="¸">¸</div>
<div className="char_block" title="¹">¹</div>
<div className="char_block" title="º">º</div>
<div className="char_block" title="»">»</div>
<div className="char_block" title="¼">¼</div>
<div className="char_block" title="½">½</div>
<div className="char_block" title="¾">¾</div>
<div className="char_block" title="¿">¿</div>
<div className="char_block" title="À">À</div>
<div className="char_block" title="Á">Á</div>
<div className="char_block" title="Â">Â</div>
<div className="char_block" title="Ã">Ã</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;When rendering any component 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 component 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
Customto disable the custom toolbar items on source code view and other quick toolbar operations.