Get the last cursor position from user to insert text

[Felix Valmor Schultz]

Hi everyone! I'm using RichTextEditor on my Angular 12 project. In this project i have a custom buttom on toolbar to open a simple modal for user select a template to insert in RichTextEditor. My question is, is there a way to get or save the last position from user's cursor? Then I can put the template selected on the position my users want.

Thanks alot!

[Buvana Sathasivam]

Hi Felix, 

Greetings from Syncfusion support. 

Yes. You can achieve your requirements. You can get the current cursor position by using the below code when the click action is performed.  

this.range = this.selection.getRange(document); 

this.saveSelection = this.selection.save(this.range, document); 

You can again restore the saved cursor position to the current Rich Text Editor content after performing some operations like the below code. 

this.saveSelection.restore(); 

this.rteObj.executeCommand('insertText', activeEle.textContent); 

this.rteObj.formatter.saveData(); 

We have same behavior in our custom tool with inserting Emoticons demo sample. In the below sample, we have stored the current cursor position when clicking the custom toolbar icon and restored the cursor position when inserting it into Rich Text Editor content. 

Demo: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/rich-text-editor/insert-emoticons 

Documentation: https://ej2.syncfusion.com/angular/documentation/rich-text-editor/toolbar/#custom-tool  

Sample: https://stackblitz.com/edit/angular-x6qvkf 

API link: https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#executecommand 

Regards, 

Buvana S 

[Suriaprakash Chellappa]

Saved my day. Solved the insert issue. Able to keep the styling and all. Need little change in code to capture the cursor position since my actions are happening outside of the text editor and comes back to that. Thanks

[Vinitha Jeyakumar]

Hi Suriaprakash Chellappa,

We are glad to assist you

Regards,

Vinitha