Search results

Set the cursor at the specific range

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

tagHelper
controller.cs
<ejs-richtexteditor id="cursor">
    <e-content-template>
        <p>
            The RichTextEditor 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();
    }
}