Insert text or image in table programmatically in Vue Document editor component

11 Jun 20249 minutes to read

Using Document editor API’s, you can insert text or image in table programmatically based on your requirement.

Use selection API’s to navigate between rows and cells.

The following example illustrates how to create 2*2 table and then add text and image programmatically.

Composition API (~/src/App.vue)

<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 the table in cursor position
  container.value.ej2Instances.documentEditor.editor.insertTable(2, 2);
  // To insert the image at table first cell
  container.value.ej2Instances.documentEditor.editor.insertImage(
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4    //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
  );
  // To move the cursor to next cell
  moveCursorToNextCell();
  // To insert the image at table second cell
  container.value.ej2Instances.documentEditor.editor.insertImage(
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4    //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
  );
  // To move the cursor to next row
  moveCursorToNextRow();
  // To insert text in cursor position
  container.value.ej2Instances.documentEditor.editor.insertText('Text');
  // To move the cursor to next cell
  moveCursorToNextCell();
  // To insert text in cursor position
  container.value.ej2Instances.documentEditor.editor.insertText('Text');
}
const moveCursorToNextCell = function () {
  // To get current selection start offset
  let startOffset = container.value.ej2Instances.documentEditor.selection.startOffset;
  // Increasing cell index to consider next cell
  let cellIndex = parseInt(startOffset.substring(6, 7)) + 1;
  // Changing start offset
  startOffset =
    startOffset.substring(0, 6) +
    cellIndex.toString() +
    startOffset.substring(7, startOffset.length);
  // Navigating selection using select method
  container.value.ej2Instances.documentEditor.selection.select(startOffset, startOffset);
}
const moveCursorToNextRow = function () {
  // To get current selection start offset
  let startOffset = container.value.ej2Instances.documentEditor.selection.startOffset;
  // Increasing row index to consider next row
  let rowIndex = parseInt(startOffset.substring(4, 5)) + 1;
  let cellIndex =
    parseInt(startOffset.substring(6, 7)) != 0
      ? parseInt(startOffset.substring(6, 7)) - 1
      : 0;
  // Changing start offset
  startOffset =
    startOffset.substring(0, 4) +
    rowIndex.toString() +
    startOffset.substring(5, 6) +
    cellIndex +
    startOffset.substring(7, startOffset.length);
  // Navigating selection using select method
  container.value.ej2Instances.documentEditor.selection.select(startOffset, startOffset);
}
</script>

Options API (~/src/App.vue)

<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 the table in cursor position
      this.$refs.container.ej2Instances.documentEditor.editor.insertTable(2, 2);
      // To insert the image at table first cell
      this.$refs.container.ej2Instances.documentEditor.editor.insertImage(
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4    //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
      );
      // To move the cursor to next cell
      this.moveCursorToNextCell();
      // To insert the image at table second cell
      this.$refs.container.ej2Instances.documentEditor.editor.insertImage(
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4    //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
      );
      // To move the cursor to next row
      this.moveCursorToNextRow();
      // To insert text in cursor position
      this.$refs.container.ej2Instances.documentEditor.editor.insertText('Text');
      // To move the cursor to next cell
      this.moveCursorToNextCell();
      // To insert text in cursor position
      this.$refs.container.ej2Instances.documentEditor.editor.insertText('Text');
    },
    moveCursorToNextCell: function () {
      // To get current selection start offset
      let startOffset = this.$refs.container.ej2Instances.documentEditor.selection.startOffset;
      // Increasing cell index to consider next cell
      let cellIndex = parseInt(startOffset.substring(6, 7)) + 1;
      // Changing start offset
      startOffset =
        startOffset.substring(0, 6) +
        cellIndex.toString() +
        startOffset.substring(7, startOffset.length);
      // Navigating selection using select method
      this.$refs.container.ej2Instances.documentEditor.selection.select(startOffset, startOffset);
    },
    moveCursorToNextRow: function () {
      // To get current selection start offset
      let startOffset = this.$refs.container.ej2Instances.documentEditor.selection.startOffset;
      // Increasing row index to consider next row
      let rowIndex = parseInt(startOffset.substring(4, 5)) + 1;
      let cellIndex =
        parseInt(startOffset.substring(6, 7)) != 0
          ? parseInt(startOffset.substring(6, 7)) - 1
          : 0;
      // Changing start offset
      startOffset =
        startOffset.substring(0, 4) +
        rowIndex.toString() +
        startOffset.substring(5, 6) +
        cellIndex +
        startOffset.substring(7, startOffset.length);
      // Navigating selection using select method
      this.$refs.container.ej2Instances.documentEditor.selection.select(startOffset, startOffset);
    }
  }
};
</script>

The output will be like below.