Inserting an HTML hr Tag in the Editor Content

Environment

Description

How to insert an HTML hr tag in the content of the Editor?

Solution

To insert an HTML hr tag in the content of the Editor:

1. Handle the click event of the ToolbarButtonComponent.

   Copy Code<kendo-toolbar-button (click)="insertHr(editor)" ...></kendo-toolbar-button>

2. Utilize the built-in exec function of the Editor and add some unique text by using its insertText command.

   Copy Codeeditor.exec('insertText', { text: '#CURSOR#' });

3. Replace the text with the hr tag.

   Copy Codeeditor.value = editor.value.replace(/#CURSOR#/, '<hr>');

The following example demonstrates how to implement the suggested approach and insert an hr tag inside the Editor component.