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

The Rich Text Editor allows you to configure your own commands to 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 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.

<ejs-richtexteditor id="customRTE" [toolbarSettings]="tools" (created)="onCreate()">
</ejs-richtexteditor>

public tools: object = {
    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.

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

Handling Selection Event

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

public select(args): void {
    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 Angular Rich Text Editor.

You can refer to Angular 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 Angular RichTextEditor example to understand how to create and manipulate data.

• Rich Text Editor Documentation
• Split Button Component