Get current word in Vue Document editor component

11 Jun 20246 minutes to read

You can get the current word or paragraph content from the Vue Document Editor component as plain text and SFDT (rich text).

Select and get the word in current cursor position

You can use selectCurrentWord API in selection module to select the current word at cursor position and use text API to get the selected content as plain text from Vue Document Editor component.

The following example code illustrates how to select and get the current word as plain text.

<template>
  <div id="app">
    <ejs-documenteditorcontainer ref="container" :serviceUrl="serviceUrl" height="590px" id="container"
      :enableToolbar="true" v-on:created="onCreated.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 onCreated = function () {
  // To insert text in cursor position
  container.value.ej2Instances.documentEditor.editor.insertText(
    'Document editor'
  );
  // Move selection to previous character
  container.value.ej2Instances.documentEditor.selection.moveToPreviousCharacter();
  // To select the current word in document
  container.value.ej2Instances.documentEditor.selection.selectCurrentWord();

  // To get the selected content as text
  var selectedContent = container.value.ej2Instances.documentEditor.selection.text;
}
</script>
<template>
  <div id="app">
    <ejs-documenteditorcontainer ref="container" :serviceUrl="serviceUrl" height="590px" id="container"
      :enableToolbar="true" v-on:created="onCreated.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: {
    onCreated: function () {
      // To insert text in cursor position
      this.$refs.container.ej2Instances.documentEditor.editor.insertText(
        'Document editor'
      );
      // Move selection to previous character
      this.$refs.container.ej2Instances.documentEditor.selection.moveToPreviousCharacter();
      // To select the current word in document
      this.$refs.container.ej2Instances.documentEditor.selection.selectCurrentWord();

      // To get the selected content as text
      var selectedContent = this.$refs.container.ej2Instances.documentEditor.selection.text;
    }
  }
};
</script>

To get the bookmark content as SFDT (rich text), please check this link

Select and get the paragraph in current cursor position

You can use selectParagraph API in selection module to select the current paragraph at cursor position and use text API or sfdt API to get the selected content as plain text or SFDT from Vue Document Editor component.

The following example code illustrates how to select and get the current paragraph as SFDT.

<template>
  <div id="app">
    <ejs-documenteditorcontainer ref="container" :serviceUrl="serviceUrl" height="590px" id="container"
      :enableToolbar="true" v-on:created="onCreated.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 onCreated = function () {
  // To insert text in cursor position
  container.value.ej2Instances.documentEditor.editor.insertText('Document editor');
  // To select the current paragraph in document
  container.value.ej2Instances.documentEditor.selection.selectParagraph();

  // To get the selected content as SFDT
  let selectedContent = container.value.ej2Instances.documentEditor.selection.sfdt;
}
</script>
<template>
  <div id="app">
    <ejs-documenteditorcontainer ref="container" :serviceUrl="serviceUrl" height="590px" id="container"
      :enableToolbar="true" v-on:created="onCreated.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: {
    onCreated: function () {
      // To insert text in cursor position
      this.$refs.container.ej2Instances.documentEditor.editor.insertText('Document editor');
      // To select the current paragraph in document
      this.$refs.container.ej2Instances.documentEditor.selection.selectParagraph();

      // To get the selected content as SFDT
      let selectedContent = this.$refs.container.ej2Instances.documentEditor.selection.sfdt;
    }
  }
};
</script>