Set Rich Text Editor Cursor Position

[Abdul Mounem]

Hi,

I have a requirement to build an email template designer, where the user will build a template base on a table so the system can automate sending the emails and it will replace with record value, the idea of it, the user will type the email and where it will require to add value, he has a list of fields and he can click, I'm doing

emailTemplateBox.executeCommand("insertText", `{{${id}}}`

to insert text but the problem is sometimes for some reason the cursor is set back to the beginning so that the text will be inserted in the wrong location, check the attached video for more details

Attachment: RichTextEditor_Issue_b9a9d892.rar

[Vinitha Jeyakumar]

Hi Abdul,

Your reported issue can be resolved by saving the cursor location in the blur event and restoring the cursor locating before inserting the HTML using ExecuteCommand. Please check the code below,

Code snippet:

let range: Range;

let selection: NodeSelection = new NodeSelection();

let saveSelection;

let defaultAPI: RichTextEditor = new RichTextEditor({

  showCharCount: true,

  maxLength: 1000,

  blur: blur,

});

defaultAPI.appendTo('#defaultRTE');

function blur() {

  range = selection.getRange(document);

  saveSelection = selection.save(range, document);

}

document.getElementById('getVal').onclick = () => {

  saveSelection.restore();

  defaultAPI.executeCommand('insertHTML', 'inserted an html');

};

Sample: https://stackblitz.com/edit/pgg2d6?file=index.html,index.ts

Regards,

Vinitha

[Abdul Mounem]

Thanks a lot for the solution, it's working now as expected

[Vinitha Jeyakumar]

Hi Abdul,

You are always welcome.

Regards,

Vinitha