Scroll editor to cursor

[Franco]

Hi! I wanted to know how to programmatically scroll the editor to the current cursor. I am currently using

this.kendoEditor.exec('insertText', { text: '##FLAG##' });
this.kendoEditor.value = this.kendoEditor.value.replace('##FLAG##', '<b>content</b>');

and if the cursor was at the bottom the user will not see the new text.

[Martin Bechev]

Hello Franco,

Thank you for the provided code snippet.

Indeed there is no built-in mechanism to scroll the Editor content to the desired position.

What can be done is to insert a custom element with an id attribute, and then to call scrollIntoView method of that element, like so:

 insertText(editor: EditorComponent) {
    editor.exec('insertText', { text: '#CURSOR#' });
    editor.value = editor.value.replace(
      /#CURSOR#/,
      "<b><span id='my-content'>content</span></b>"
    );

    const iframeDoc = (document.querySelector('.k-iframe') as HTMLIFrameElement)
      .contentDocument;

    const customSpan = iframeDoc.getElementById('my-content');
    customSpan.scrollIntoView();
  }

Here is an example:

https://stackblitz.com/edit/angular-7j9fpr

Please bear in mind that the suggested approach is just a workaround and it is not supported by the component itself. The developer can further extend the logic or implemented an entirely new one based on the project requirements.

Regards,
Martin
Progress Telerik