How to Customize Toolbar in Vue DOCX Editor

28 Aug 20267 minutes to read

How to customize the existing toolbar in DocumentEditorContainer

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

  • Add - New items can be defined by CustomToolbarItemModel and included with the existing items in the toolbarItems property. The click action for the newly added item 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 disabled using the enableItems API.
<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 the image toolbar item.
      container.value.ej2Instances.toolbar.enableItems(4, false);
      break;
  }
}
</script>
<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 the 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>

The 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 DOCX Editor for working with Word documents in this live demo here.