Setting the Cursor at the End of the Kendo UI for Angular Editor

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI® for Angular Editor

Description

When focusing the Editor component, I want to position the cursor at the end of the currently displayed text. How can I achieve this functionality?

This Knowledge Base article also answers the following questions:

• How to move the cursor at the end of the Kendo UI for Angular Editor?
• How can I set the focus at the last character of the Editor's content?
• Is it possible to automatically focus the end of the text in the Angular Editor component?

Solution

To set the cursor position at the end of the text within the Kendo UI for Angular Editor upon focusing on the component:

1. Handle the focus event of the Editor component.

   html

   <kendo-editor #editor ... [(value)]="value" (focus)="onFocus($event, editor)"></kendo-editor>

2. Obtain the length of the currently displayed text.

   ts

   const endIndex = this.value.length;

3. Use the calculated length to position the cursor at the end of the text.

   ts

   public onFocus(e, editor: EditorComponent) {
       setTimeout(() => {
         const endIndex = this.value.length;
         editor.view.state.selection.$cursor.pos = endIndex;
         editor.view.focus();
       });
   }

The following example demonstrates the suggested approach in action.

Change Theme

Theme

Loading ...

See Also

• Editor Component Overview
• Editor API Reference
• Moving the Cursor of the Editor to the Beginning