Search results

Customize toolbar in Vue DocumentEditor component

14 Oct 2021 / 1 minute to read

How to customize existing toolbar in DocumentEditorContainer

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

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

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

  Vue.use(DocumentEditorContainerPlugin);
  export default {
  data(){
    return {
      items: [
      {
          prefixIcon: "e-de-ctnr-lock",
          tooltipText: "Disable Image",
          text: "Disable Image",
          id: "Custom"
      },
    'Undo','Redo','Separator','Image','Table','Hyperlink','Bookmark','Comments','TableOfContents','Separator','Header','Footer','PageSetup','PageNumber','Break',
    'Separator','Find','Separator','LocalClipboard','RestrictEditing']
    }
  },
  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;
      }
    }
  }
  }
</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'].