How to move the selection to specific position in Document Editor component

14 Nov 20223 minutes to read

Using select API in selection module, You can set cursor position to anywhere in the document.

Selects content based on start and end hierarchical index

Hierarchical index will be in below format.

sectionIndex;blockIndex;offset

The following code snippet illustrate how to select using hierarchical index.

// Selection will occur between provided start and end offset
this.documentEdContainerIns.documentEditor.editor.insertText("Welcome");
// The below code will select the letters “We” from inserted text “Welcome”
this.documentEdContainerIns.documentEditor.selection.select("0;0;0", "0;0;2");

The following table illustrates about Hierarchical index in detail.

Element	Hierarchical Format	Explanation
Move selection to Paragraph	sectionIndex;blockIndex;offset Ex: 0;0;0	It moves the cursor to the start of paragraph.
Move selection to Table	sectionIndex;tableIndex;rowIndex;cellIndex;blockIndex;offset Ex: 0;0;0;0;1;0	It moves the cursor to the second paragraph which is inside first row and cell of table.
Move selection to header	pageIndex;H;sectionIndex;blockIndex;offset Ex: 1;H;0;0;0	It moves cursor to the header in second page.
Move selection to Footer	pageIndex;F;sectionIndex;blockIndex;offset Ex: 1;F;0;0;0	It moves cursor to the footer in second page.

Get the selection start and end hierarchical index

Using [startOffset], you can get start hierarchical index which denotes the start index of current selection.
Similarly, using [endOffset], you can get end hierarchical index which denotes the end index of current selection.

The following code snippet illustrate how to get the selection start and end offset on selection changes in document.

CSHTML

<div class="control-section">
    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
</div>

<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        documenteditor = container.documentEditor;
        // Event gets triggered on selection change in document
        container.selectionChange = function () {
          //Get the start index of current selection
          let startOffset = container.documentEditor.selection.startOffset;
          //Get the end index of current selection
          let endOffset = container.documentEditor.selection.endOffset;
        };
    }
</script>

Selects the content based on left and top position

Here, you can specify the [selection settings] to select the content based on left and top position.

x denotes the left position and y denotes the top position and extend denotes whether to extend or update selection.

Check below code sample for reference.

this.container.documentEditor.selection.select({ x: 188.4814208984375 , y: 662.00005, extend: true });