How to Move Selection to a Position in Vue DOCX Editor

28 Aug 20264 minutes to read

Select content based on start and end hierarchical index

The hierarchical index will be in the format below.

sectionIndex;blockIndex;offset

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

// Selection will occur between provided start and end offset
this.$refs.container.ej2Instances.documentEditor.editor.insertText("Welcome");
// The following code will select the letters "We" from inserted text "Welcome"
this.$refs.container.ej2Instances.documentEditor.selection.select("0;0;0", "0;0;2");

The following table illustrates the 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 the start hierarchical index, which denotes the start index of the current selection.
Similarly, using endOffset, you can get the end hierarchical index, which denotes the end index of the current selection.

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

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-documenteditorcontainer ref="container" :serviceUrl="serviceUrl" height="590px" id="container"
      :enableToolbar="true" v-on:selectionChange="selectionChanged.bind(this)"></ejs-documenteditorcontainer>
  </div>
</template>
<script setup>
import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
import { provide, ref } from 'vue';

const container = ref(null);
const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';

//Inject require modules.
provide('DocumentEditorContainer', [Toolbar]);

const selectionChanged = function () {
  //Get the start index of current selection
  let startOffset = container.value.ej2Instances.documentEditor.selection.startOffset;
  //Get the end index of current selection
  let endOffset = container.value.ej2Instances.documentEditor.selection.endOffset;
}
</script>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-documenteditorcontainer ref="container" :serviceUrl="serviceUrl" height="590px" id="container"
      :enableToolbar="true" v-on:selectionChange="selectionChanged.bind(this)"></ejs-documenteditorcontainer>
  </div>
</template>
<script>
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';

export default {
  components: {
    'ejs-documenteditorcontainer': DocumentEditorContainerComponent
  },
  data() {
    return {
      serviceUrl:
        'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/',
    };
  },
  provide: {
    //Inject require modules.
    DocumentEditorContainer: [Toolbar]
  },
  methods: {
    selectionChanged: function () {
      //Get the start index of current selection
      let startOffset =
        this.$refs.container.ej2Instances.documentEditor.selection.startOffset;
      //Get the end index of current selection
      let endOffset = this.$refs.container.ej2Instances.documentEditor.selection.endOffset;
    }
  }
};
</script>

NOTE

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.

DOCX Editor has selectionChange event which is triggered whenever the selection changes in the document.

Select the content based on left and top positions

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

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

Please refer to the code sample below for reference.

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