Customize tool bar in Vue Document editor component

22 Jun 20267 minutes to read

How to customize existing toolbar in DocumentEditorContainer

Vue DOCX Editor (Document Editor) Container allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar.

• Add - New items can defined by CustomToolbarItemModel and with existing items in toolbarItems property. Newly added item click action can be defined in toolbarClick.
• Show, Hide - Existing items can be shown or hidden using the toolbarItems property. Pre-defined toolbar items are available with ToolbarItem.
• Enable, Disable - Toolbar items can be enabled or disable using enableItems

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-documenteditorcontainer ref="container" :toolbarItems='items' v-bind:toolbarClick='onToolbarClick'
      :enableToolbar='true'> </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 onWrapText = function (text) {
  let content = '';
    const index = text.lastIndexOf(' ');
    if (index !== -1) {
        content = text.slice(0, index) + "<div class='e-de-text-wrap'>" + text.slice(index + 1) + "<div>";
    } else {
        content = text;
    }

    return content;
}
const items = [
  {
    prefixIcon: "e-de-ctnr-lock",
    tooltipText: "Disable Image",
    text: onWrapText("Disable Image"),
    id: "Custom"
  },
  'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']

provide('DocumentEditorContainer', [Toolbar]);

const onToolbarClick = function (args) {
  switch (args.item.id) {
    case 'Custom':
      //Disable image toolbar item.
      container.value.ej2Instances.toolbar.enableItems(4, false);
      break;
  }
}
</script>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-documenteditorcontainer
      ref="container"
      :toolbarItems="items"
      v-bind:toolbarClick="onToolbarClick"
      :enableToolbar="true"
    >
    </ejs-documenteditorcontainer>
  </div>
</template>

<script>
import {
  DocumentEditorContainerComponent,
  Toolbar,
} from '@syncfusion/ej2-vue-documenteditor';

export default {
  components: {
    'ejs-documenteditorcontainer': DocumentEditorContainerComponent,
  },
  data() {
    return {
      items: this.getToolbarItems(),
    };
  },
  provide: {
    DocumentEditorContainer: [Toolbar],
  },
  methods: {
    onToolbarClick: function (args) {
      switch (args.item.id) {
        case 'Custom':
          //Disable image toolbar item.
          this.$refs.container.ej2Instances.toolbar.enableItems(4, false);
          break;
      }
    },
    onWrapText: function (text) {
      let content = '';
      const index = text.lastIndexOf(' ');

      if (index !== -1) {
        content =
          text.slice(0, index) +
          "<div class='e-de-text-wrap'>" +
          text.slice(index + 1) +
          '</div>';
      } else {
        content = text;
      }

      return content;
    },
    getToolbarItems: function () {
      return [
        {
          prefixIcon: 'e-de-ctnr-lock',
          tooltipText: 'Disable Image',
          text: this.onWrapText('Disable Image'),
          id: 'Custom',
        },
        'Undo',
        'Redo',
        'Separator',
        'Image',
        'Table',
        'Hyperlink',
        'Bookmark',
        'TableOfContents',
        'Separator',
        'Header',
        'Footer',
        'PageSetup',
        'PageNumber',
        'Break',
        'InsertFootnote',
        'InsertEndnote',
        'Separator',
        'Find',
        'Separator',
        'Comments',
        'TrackChanges',
        'Separator',
        'LocalClipboard',
        'RestrictEditing',
        'Separator',
        'FormFields',
        'UpdateFields',
        'ContentControl',
      ];
    },
  },
};
</script>

Note: Default value of toolbarItems is ['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl'].

Online Demo

Explore how to customize the toolbar in the Vue Document Editor for working with Word documents in this live demo here.