Move selection to specific position in Vue Document editor component
11 Jun 20244 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.$refs.container.ej2Instances..documentEditor.editor.insertText("Welcome");
// The below 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 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.
<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://ej2services.syncfusion.com/production/web-services/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>
<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://ej2services.syncfusion.com/production/web-services/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>
Document editor have selectionChange
event which is triggered whenever the selection changes in Document.
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.
Please check below code sample for reference.
this.$refs.container.ej2Instances.documentEditor.selection.select({ x: 188.4814208984375 , y: 662.00005, extend: true });