Edit this page

Setting Selections

The Editor works with standard range objects that provide a polyfill for Internet Explorer versions that do not fully support them.

To set the Editor selection, create a Range object that specifies the desired selection and pass it to the selectRange method.

The following example demonstrates how to set the Editor selections.

Example
<textarea id="editor"></textarea>
<script>
  var editor = $("#editor").kendoEditor().data("kendoEditor");

  editor.value("<strong>foo</strong><em>bar</em>");

  var strong = $("strong", editor.body)[0];
  var em = $("em", editor.body)[0]

  // get a Range object within the Editor document
  var range = editor.createRange();

  // set range start after **f**
  range.setStart(strong.firstChild, 1);

  // set range end before **r**
  range.setEnd(em.firstChild, 2);

  // set editor selection to a given range
  editor.selectRange(range);
</script>

Note that the second parameter of the setStart and setEnd methods works differently with the Element and Text nodes.

For the Text nodes, the range boundary is set between the characters of the node

  • 0 means "before all characters".
  • 1 means "between the first and the second character".

For the Element nodes, the range boundary is set between the child nodes:

  • 0 means "at the start of the element".
  • element.childNodes.length means "after all children".

For more information, refer to the tutorial on Range objects on Quirksmode.

See Also

Other articles on the Kendo UI Editor:

For how-to examples on the Kendo UI Editor widget, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy