Set Caret Positions in the Editor
Environment
| Product | Progress® Kendo UI® Editor for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I set the position of the caret inside an inline Kendo UI for jQuery Editor?
Solution
To set the position of the caret inside an inline Kendo UI Editor by using JavaScript, you can use a position index or search for a string.
The exact implementation in other scenarios varies, depending on the business logic and used DOM or Range APIs.
The following example demonstrates how to use a position index—that is, it sets a caret position inside the Editor to a specified index.
<div id="example">
<p><button id="setPosition" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md">Click</button></p>
<textarea id="editor">Some text to focus and edit.</textarea>
</div>
<script>
$(document).ready(function() {
$("#editor").kendoEditor();
$("#setPosition").click(function () {
$("#editor").focus().trigger("click");
var editor = $("#editor").data("kendoEditor");
moveCaret(editor, 6);
});
function moveCaret(editor, position) {
var range = editor.getRange();
if (range.collapsed) {
var textNode = editor.body.firstChild;
range.setStart(textNode, position);
range.collapse(true); // collapse to start
editor.selectRange(range);
}
}
});
</script>
The following example demonstrates how to search for a string—that is, it sets the a caret position to the start of a string.
<div id="example">
<p>
<input id="stringToFocus" class="k-textbox" type="text" value="focus" style="width: 20%" />
<button id="setPosition" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md">Click</button>
</p>
<textarea id="editor" style="margin: 5em 0 0">
<p>Random paragraph 1.</p>
<p>Some text to focus and edit.</p>
</textarea>
</div>
<script>
$(document).ready(function() {
$("#editor").kendoEditor();
$("#stringToFocus").kendoTextBox();
function findNodeOfString(container, str) {
var nodeIterator = document.createNodeIterator(
container,
NodeFilter.SHOW_TEXT,
function(node) {
return node.nodeValue.indexOf(str) >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
});
return nodeIterator.nextNode();
}
function moveCaret(editor, str) {
var range = editor.getRange();
if (range.collapsed) {
var textNode = findNodeOfString(editor.body, str);
if (textNode !== null) {
var position = textNode.nodeValue.indexOf(str);
range.setStart(textNode, position);
}
range.collapse(true); // collapse to start
editor.selectRange(range);
}
}
$("#setPosition").click(function () {
$("#editor").focus().trigger("click");
var editor = $("#editor").data("kendoEditor");
moveCaret(editor, $("#stringToFocus").val());
});
});
</script>