Having trouble getting help?
Contact Support
Contact Support
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 < IFRAME > and < DIV > 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();
}
}