Get Current Cursor / Caret position

[Salvatore Cannone]

Hi,

What functions are available to get the current cursor / caret position within the editor , then be able to insert text in that position programatically .

Regards,

Sal

[Vinothkumar Yuvaraj]

Hi Salvatore Cannone,

We would like to inform you that the Rich Text Editor provides a "getRange" method, which allows you to obtain the range of the cursor position within the editor. Subsequently, you can utilize this range to insert text programmatically using the "executeCommand" method. For your convenience, we have included a code snippet below:

  <button id="btnClick">Insert Text</button>

  <div id="defaultRTE">

    <div><p> you want to include from the popup.</p></div>     

  </div>

 

   var selection = new ej.richtexteditor.NodeSelection();

    var range;

    var saveSelection;

    var defaultRTE = new ej.richtexteditor.RichTextEditor({

      

    });

    defaultRTE.appendTo('#defaultRTE');

 

    document.getElementById("btnClick").addEventListener("click",()=>{

        range = selection.getRange(document);

        saveSelection = selection.save(range, document);

 

        if (defaultRTE.formatter.getUndoRedoStack().length === 0) {

            defaultRTE.formatter.saveData();

        }

        saveSelection.restore();

        defaultRTE.executeCommand('insertText', "Rich Text Editor");

        defaultRTE.formatter.saveData();

        defaultRTE.formatter.enableUndo(defaultRTE);

    })

Sample : https://stackblitz.com/edit/dypeyj?file=index.js,index.html

API Link :

https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/#getrange

https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/#executecommand

Please take a look at the above sample.

Regards,

Vinothkumar

[Salvatore Cannone]

Thank You ..

[Gokulraj Devarajan]

You're welcome! Please get back to us if you need any other assistance. 

 

Regards

Gokulraj Devarajan

[Tanmay]

Hi I am using the Syncfusion 25.1.35 and i am trying to fetch and restore the current carest position, but unable  to get it with your example, it says selection.save undefined. Will you please help me ?

Thanks 

[Vinothkumar Yuvaraj]

Hi Tanmay,

We have validated your reported query. You can use the getRange method to get the range from the document and restore it using the restore method. Please see the following code and attached sample for your reference.

Additionally, in the sample, we store the cursor position when the "Save Range" button is clicked and restore it when the "Restore Range" button is clicked.

index.html

 <div class="default-section" id="rteSection">

            <div id="defaultRTE">

                <div><p style="margin-right:10px">The custom command "insert spe

cial character" is configure

ed as the last item of the toolbar. Click on the comma

nd and choose the special character you want to include from the popup.</p></div>     

            </div>

 

            <button id="saveRange">Save Range</button>

            <button id="restoreRange">Restore Range</button>

        </div>

index.js

var selection = new ej.richtexteditor.NodeSelection();

var range;

var saveSelection;

var defaultRTE = new ej.richtexteditor.RichTextEditor({

    toolbarSettings: {

        items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList',

            'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', '|', 'Undo', 'Redo'

        ]

    },

});

defaultRTE.appendTo('#defaultRTE');

 

document.getElementById("saveRange").addEventListener("click", () => {

    range = selection.getRange(document);

    saveSelection = selection.save(range, document);

})

document.getElementById("restoreRange").addEventListener("click", () => {

    if (defaultRTE.formatter.getUndoRedoStack().length === 0) {

        defaultRTE.formatter.saveData();

    }

    saveSelection.restore();

    //Insert the text at the cursor position.

    defaultRTE.executeCommand('insertText', 'Rich Text Editor');

})

Sample: https://stackblitz.com/edit/3sibbx-qhue6w?file=index.js,index.html

In the following documentation, you can learn how to set the cursor at a specific position in the Rich Text Editor.

Documentation: https://stackblitz.com/edit/3sibbx-qhue6w?file=index.js,index.html

Regards,

Vinothkumar