New to Kendo UI for jQuery? Download free 30-day trial

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" style="margin: 2em;">
        <p><button id="setPosition" class="k-button">Click</button></p>
        <div id="editor">Some text to focus and edit.</div>
    </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" style="margin: 2em;">
      <p><input id="stringToFocus" class="k-textbox" type="text" value="focus" /> <button id="setPosition" class="k-button">Click</button></p>
      <div id="editor" style="margin: 5em 0 0">
        <p>Random paragraph 1.</p>
        <p>Some text to focus and edit.</p>
      </div>
    </div>

    <script>
      $(document).ready(function() {
        $("#editor").kendoEditor();


        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>

See Also

In this article