Adding a Split Button as Custom Toolbar in React Rich Text Editor

The Rich Text Editor allows you to configure your own commands in its toolbar using the toolbarSettings property.
To add a split button as a custom tool in the Rich Text Editor, you can utilize the created event to implement your requirements.

Initialize the Rich Text Editor

Set up the RichTextEditor with the necessary toolbar settings and created an event. The toolbarSettings defines the items in the toolbar, including the split button as a template.

Below is a sample code snippet that demonstrates how to achieve this.

<RichTextEditorComponent id="customRTE" ref={(scope) => { rteObj = scope; }} toolbarSettings={toolbarSettings}  created={onCreate.bind(this)}>

<Inject services={[HtmlEditor, Toolbar, Link, Image, QuickToolbar, PasteCleanup, Table, Video, Audio]}/>
</RichTextEditorComponent>

const tools = {
    items: [
      'Bold',
      'Italic',
      'Underline',
      '|',
      'Formats',
      'Alignments',
      'OrderedList',
      'UnorderedList',
      '|',
      'CreateLink',
      'Image',
      '|',
      'SourceCode',
      {
        tooltipText: 'Split Button',
        template: '<button id="splitbutton"></button>',
      },
      '|',
      'Undo',
      'Redo',
    ],
};

Creating the Split Button

Use the created event of the Rich Text Editor to initialize the split button and append it to the specified element. You can add the list of action items for the split button using the items property. Bind the select event which will trigger while selecting action item of SplitButton popup.

 const items1 = [
    {
      text: 'Bold',
    },
    {
      text: 'Italic',
    },
    {
      text: 'Underline',
    },
];
function onCreate() {
    proxy = this;
    splitButton = new SplitButton({
      items: items1,
      content: 'Button',
      select: select,
    });
    splitButton.appendTo('#splitbutton');
}

Handling Selection Event

The select method executes the corresponding command based on the selected item from the split button.

function select(args) {
    var rte = (document.getElementById('customRTE') as any).ej2_instances[0];
    if (args.item.text == 'Bold') {
      rte.executeCommand('bold');
    } else if (args.item.text == 'Italic') {
      rte.executeCommand('italic');
    } else {
      rte.executeCommand('underline');
    }
}

Conclusion

I hope you enjoyed learning how to add split button as custom toolbar in React Rich Text Editor.

You can refer to React RichTextEditor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React RichTextEditor example to understand how to create and manipulate data.

• Split Button Component