Set the cursor at the specific range

17 Feb 20223 minutes to read

This can be achieved by using setRange method in the Rich Text Editor using NodeSelection instance. In this below sample, we have passed the text node (specific location in Rich Text Editor content) in setStart method and passed the range in setRange method of Rich Text Editor.

<ejs-richtexteditor id="cursor">
    <e-content-template>
        <p>
            The Rich Text Editor control is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content.
            Users can format their content using standard toolbar commands.
        </p>
        <p><b id='key'> Key features:</b></p>

        <ul>
            <li><p> Provides &lt; IFRAME &gt; and &lt; DIV &gt; modes </p></li>

            <li><p> Capable of handling markdown editing.</p></li>

            <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>

            <li><p> Provides a fully customizable toolbar.</p></li>

            <li><p> Provides HTML view to edit the source directly for developers.</p></li>

            <li><p> Supports third - party library integration.</p></li>

            <li><p> Allows preview of modified content before saving it.</p></li>

            <li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>

            <li><p> Contains undo / redo manager.</p></li>

            <li><p> Creates bulleted and numbered lists.</p></li>

        </ul>
    </e-content-template>
</ejs-richtexteditor>

<input id="btn" type="button" value="Set cursor point" onclick="btnClick()" />
<script>
    
    function btnClick() {
        var selectioncursor = new ej.richtexteditor.NodeSelection();
        var element = document.getElementById("cursor").ej2_instances[0].contentModule.getDocument().getElementById("key");
        var range = document.createRange();
        range.setStart(element, 1); // to set the range
        selectioncursor.setRange(document, range); // to set the cursor
    }
</script>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }
}