Inserting an HTML hr Tag in the Editor Content

Environment

Product

Progress® Kendo UI® for Angular Editor

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.

   html

   <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.

   ts

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

3. Replace the text with the hr tag.

   ts

   editor.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.

Change Theme

Theme

Loading ...