How to Customize Ribbon in Vue DOCX Editor

28 Aug 202624 minutes to read

The Vue DOCX Editor (Document Editor) provides an extensive and flexible API to customize the built-in ribbon UI. You can:

• Customize the File menu.
• Add the Backstage menu instead of the File menu.
• Show, hide, or add Ribbon tabs.
• Show, hide, or add groups within tabs.
• Show, hide, add, enable, or disable items within groups.

Below are detailed examples for each ribbon customization scenario.

File Menu Customization

The DOCX Editor provides APIs to remove existing File menu items and add new custom items based on your requirements. You can modify the File menu using the fileMenuItems property.

In the example below, the “Open” and “Export” items have been removed from the File menu items, and new custom items have been added.

Composition API (~/src/App.vue)

<template>
<div class="control-section">
    <ejs-documenteditorcontainer ref="documenteditorcontainer" :toolbarMode="'Ribbon'" 
    :serviceUrl="hostUrl" :enableToolbar='true' height='600px' :fileMenuItems="fileMenuItems"
    @fileMenuItemClick="fileMenuClick"></ejs-documenteditorcontainer>
</div>
</template>
<script setup>
import { DocumentEditorContainerComponent, Toolbar, Ribbon } from "@syncfusion/ej2-vue-documenteditor";
import { onMounted, ref } from 'vue';

const documenteditorcontainer = ref(null);
provide('DocumentEditorContainer', [Toolbar, Ribbon]);
const fileMenuItems = [
  'New',
  'Print',
  { text: 'Export', id: 'custom_item', iconCss: 'e-icons e-export' }
];
function fileMenuClick(args) {
  if (args.item && args.item.id === 'custom_item') {
    documenteditorcontainer.value.ej2Instances.documentEditor.save('Sample', 'Docx');
  }
}
onMounted(() => {
  const editorInstance = documenteditorcontainer.value?.ej2Instances?.documentEditor;
});
</script>

Options API (~/src/App.vue)

<template>
<div class="control-section">
    <ejs-documenteditorcontainer ref="doceditcontainer" :toolbarMode="'Ribbon'" 
    :serviceUrl="hostUrl" :enableToolbar='true' height='600px' :fileMenuItems="fileMenuItems"
    @fileMenuItemClick="fileMenuClick"></ejs-documenteditorcontainer>
</div>
</template>

<script>
import { DocumentEditorContainerComponent, Toolbar, Ribbon } from "@syncfusion/ej2-vue-documenteditor";
export default {
  components: {
    'ejs-documenteditorcontainer': DocumentEditorContainerComponent,
  },
  provide: {
    DocumentEditorContainer: [Toolbar, Ribbon]
  },
  data() {
    return {
      fileMenuItems: [
        'New',
        'Print',
        { text: 'Export', id: 'custom_item', iconCss: 'e-icons e-export' }
      ]
    };
  },
  methods: {
    fileMenuClick(args) {
      if (args.item) {
        this.$refs.doceditcontainer.ej2Instances.documentEditor.save('Sample', 'Docx');
      }
    }
  }
};

</script>

Backstage Menu Customization

The DOCX Editor provides a backStageMenu API to add a backstage menu. When the backstage menu is enabled, the default File menu items are automatically hidden.

The following code example shows how to add the backstage menu items.

Composition API (~/src/App.vue)

<template>
<div class="control-section">
    <ejs-documenteditorcontainer ref="documenteditorcontainer" :toolbarMode="'Ribbon'" 
    :serviceUrl="hostUrl" :enableToolbar='true' height='600px' :backstageMenu="backstageMenu"
    @backstageItemClick="handleBackstageItemClick"></ejs-documenteditorcontainer>
</div>
</template>
<script setup>
import { DocumentEditorContainerComponent, Toolbar, Ribbon } from "@syncfusion/ej2-vue-documenteditor";
import { onMounted, ref } from 'vue';

const documenteditorcontainer = ref(null);
provide('DocumentEditorContainer', [Toolbar, Ribbon]);
const backstageMenu = {
  text: 'File',
  backButton: { text: 'close' },
  items: [
    { id: 'new', text: 'New', iconCss: 'e-icons e-de-ctnr-new' }
  ]
};
function handleBackstageItemClick(args) {
  if (args.item) {
    documenteditorcontainer.value.ej2Instances.documentEditor.openBlank();
  }
}
onMounted(() => {
  const editorInstance = documenteditorcontainer.value?.ej2Instances?.documentEditor;
});
</script>

Options API (~/src/App.vue)

<template>
<div class="control-section">
    <ejs-documenteditorcontainer ref="doceditcontainer" :toolbarMode="'Ribbon'" 
    :serviceUrl="hostUrl" :enableToolbar='true' height='600px' :backstageMenu="backstageMenu"
    @backstageItemClick="handleBackstageItemClick"></ejs-documenteditorcontainer>
</div>
</template>

<script>
import { DocumentEditorContainerComponent, Toolbar, Ribbon } from "@syncfusion/ej2-vue-documenteditor";
export default {
  components: {
    'ejs-documenteditorcontainer': DocumentEditorContainerComponent,
  },
  provide: {
    DocumentEditorContainer: [Toolbar, Ribbon]
  },
  data() {
    return {
      backstageMenu: {
        text: 'File',
        backButton: { text: 'close' },
        items: [
          { id: 'new', text: 'New', iconCss: 'e-icons e-de-ctnr-new' }
        ]
      }
    };
  },
  methods: {
    handleBackstageItemClick(args) {
      if (args.item) {
        this.$refs.doceditcontainer.ej2Instances.documentEditor.openBlank();
      }
    }
  }
};
</script>

Refer to this documentation to know more about backstage items.

Tab Customization

You can customize the ribbon tabs in the DOCX Editor by showing, hiding, or adding tabs according to your application’s requirements.

Show/Hide Tab

The DOCX Editor provides the showTab API to show and hide the existing tab using the existing RibbonTabType and tabId.

The following code example illustrates how to show/hide an existing tab using the existing tab type and tab id.

// To hide the Home tab using the built-in `RibbonTabType`
this.$refs.doceditcontainer.ej2Instances.ribbon.showTab('Home', false);

// To hide a tab by its tab id (for example, a custom tab)
this.$refs.doceditcontainer.ej2Instances.ribbon.showTab('custom_tab', false);

Add Tab

The DOCX Editor provides the addTab API, which allows you to insert a new custom tab either between existing tabs or at the end of the ribbon tabs.

Composition API (~/src/App.vue)

<template>
<div class="control-section">
    <ejs-documenteditorcontainer ref="documenteditorcontainer" :toolbarMode="'Ribbon'" 
    :serviceUrl="hostUrl" :enableToolbar='true' height='600px'></ejs-documenteditorcontainer>
</div>
</template>
<script setup>
import { DocumentEditorContainerComponent, Toolbar, Ribbon } from "@syncfusion/ej2-vue-documenteditor";
import { onMounted, ref } from 'vue';
import { RibbonTabModel } from '@syncfusion/ej2-ribbon';

const documenteditorcontainer = ref(null);
provide('DocumentEditorContainer', [Toolbar, Ribbon]);

onMounted(() => {
    const container = documenteditorcontainer.value?.ej2Instances;
    // To add the tab at the end of the tabs
    const ribbonTab = {
      header: 'Custom Tab',
      id: 'custom_tab',
      groups: [{
        header: 'Custom Group',
        collections: [{
          items: [{
            type: 'Button',
            buttonSettings: {
              content: 'New',
              iconCss: 'e-icons e-de-ctnr-new',
              clicked: () => {
                container.documentEditor.openBlank();
              }
            }
          }]
        }]
      }]
    };
    container.ribbon.addTab(ribbonTab);

    // To add the tab before the Insert tab (existing tab)
    container.ribbon.addTab(ribbonTab, 'Insert');
});
</script>

Options API (~/src/App.vue)

<template>
<div class="control-section">
    <ejs-documenteditorcontainer ref="doceditcontainer" :toolbarMode="'Ribbon'" 
    :serviceUrl="hostUrl" :enableToolbar='true' height='600px'></ejs-documenteditorcontainer>
</div>
</template>

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

export default {
  components: {
    'ejs-documenteditorcontainer': DocumentEditorContainerComponent,
  },
  provide: {
    DocumentEditorContainer: [Toolbar, Ribbon]
  },
  mounted() {
    const container = this.$refs.doceditcontainer.ej2Instances;

    // To add the tab at the end of the tabs
    const ribbonTab = {
      header: 'Custom Tab',
      id: 'custom_tab',
      groups: [{
        header: 'Custom Group',
        collections: [{
          items: [{
            type: 'Button',
            buttonSettings: {
              content: 'New',
              iconCss: 'e-icons e-de-ctnr-new',
              clicked: () => {
                container.documentEditor.openBlank();
              }
            }
          }]
        }]
      }]
    };
    container.ribbon.addTab(ribbonTab);

    // To add the tab before the Insert tab (existing tab)
    container.ribbon.addTab(ribbonTab, 'Insert');
  }
};

</script>

Group Customization

You can also customize ribbon groups within a tab to better organize commands or add new functionalities as per your needs.

Show/Hide Group

The DOCX Editor provides a showGroup API to show or hide existing groups within a ribbon tab.

The following code example shows how to show/hide the group using the group id or RibbonGroupInfo.

// To hide the clipboard group using the group index
this.$refs.doceditcontainer.ej2Instances.ribbon.showGroup({tabId: 'Home', index: 1} , false);

// To show the clipboard group using the group index
this.$refs.doceditcontainer.ej2Instances.ribbon.showGroup({tabId: 'Home', index: 1} , true);

// To hide the group using its id
this.$refs.doceditcontainer.ej2Instances.ribbon.showGroup('custom_group', false);

Add Group

To extend the ribbon’s functionality, you can add custom groups to any tab. This allows you to organize related commands together within a tab.

Composition API (~/src/App.vue)

<template>
<div class="control-section">
    <ejs-documenteditorcontainer ref="documenteditorcontainer" :toolbarMode="'Ribbon'" 
    :serviceUrl="hostUrl" :enableToolbar='true' height='600px'></ejs-documenteditorcontainer>
</div>
</template>
<script setup>
import { DocumentEditorContainerComponent, Toolbar, Ribbon } from "@syncfusion/ej2-vue-documenteditor";
import { onMounted, ref } from 'vue';

const documenteditorcontainer = ref(null);
provide('DocumentEditorContainer', [Toolbar, Ribbon]);

onMounted(() => {
    const container = documenteditorcontainer.value?.ej2Instances;
    // Add the new group at the end of the Home tab
    const ribbonGroup = {
      header: 'Custom Group',
      collections: [
        {
          items: [
            {
              type: 'Button',
              buttonSettings: {
                content: 'New',
                iconCss: 'e-icons e-de-ctnr-new',
                clicked: () => {
                  container.documentEditor.openBlank();
                }
              }
            }
          ]
        }
      ]
    };
    container.ribbon.addGroup('Home', ribbonGroup);

    // Add the new group at the specified index of the Home tab (before the Clipboard group)

    container.ribbon.addGroup('Home', ribbonGroup, 1);
});
</script>

Options API (~/src/App.vue)

<template>
<div class="control-section">
    <ejs-documenteditorcontainer ref="doceditcontainer" :toolbarMode="'Ribbon'" 
    :serviceUrl="hostUrl" :enableToolbar='true' height='600px'></ejs-documenteditorcontainer>
</div>
</template>

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

export default {
  components: {
    'ejs-documenteditorcontainer': DocumentEditorContainerComponent,
  },
  provide: {
    DocumentEditorContainer: [Toolbar, Ribbon]
  },
  mounted() {
    const container = this.$refs.doceditcontainer.ej2Instances;

    // Add the new group at the end of the Home tab
    const ribbonGroup = {
      header: 'Custom Group',
      collections: [
        {
          items: [
            {
              type: 'Button',
              buttonSettings: {
                content: 'New',
                iconCss: 'e-icons e-de-ctnr-new',
                clicked: () => {
                  container.documentEditor.openBlank();
                }
              }
            }
          ]
        }
      ]
    };
    container.ribbon.addGroup('Home', ribbonGroup);

    // Add the new group at the specified index of the Home tab (before the Clipboard group)

    container.ribbon.addGroup('Home', ribbonGroup, 1);
  }
};
</script>

Item Customization

You can customize individual items within ribbon groups. This includes showing, hiding, enabling, disabling, or adding new items to any group within a ribbon tab.

Show/Hide Item

Using the showItems API in the DOCX Editor ribbon to show/hide the existing item. Here, you can specify the item id or RibbonItemInfo.

The following code example shows how to show/hide the item using the item id or RibbonItemInfo.

// To hide the Bold and Italic items using the ribbon item information
this.$refs.doceditcontainer.ej2Instances.ribbon.showItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [5, 6] } , false);

// To show the Bold and Italic items using the ribbon item information
this.$refs.doceditcontainer.ej2Instances.ribbon.showItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [5, 6] } , true);

// To hide the item using the item id
this.$refs.doceditcontainer.ej2Instances.ribbon.showItems('custom_item', false);

Enable/Disable Item

Using the enableItems API in the DOCX Editor ribbon to enable/disable the existing item.

// To disable the underline using the ribbon item info
this.$refs.doceditcontainer.ej2Instances.ribbon.enableItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [7] },false);

// To enable the underline using the ribbon item info
this.$refs.doceditcontainer.ej2Instances.ribbon.enableItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [7] },true);

// To disable the item using the id
this.$refs.doceditcontainer.ej2Instances.ribbon.enableItems('custom_item', false);

Add Item

You can use the addItem API in the DOCX Editor ribbon to add a new item. Additionally, you can specify the target tab and group where the new item should be placed.

Composition API (~/src/App.vue)

<template>
<div class="control-section">
    <ejs-documenteditorcontainer ref="documenteditorcontainer" :toolbarMode="'Ribbon'" 
    :serviceUrl="hostUrl" :enableToolbar='true' height='600px'></ejs-documenteditorcontainer>
</div>
</template>
<script setup>
import { DocumentEditorContainerComponent, Toolbar, Ribbon } from "@syncfusion/ej2-vue-documenteditor";
import { onMounted, ref } from 'vue';

const documenteditorcontainer = ref(null);
provide('DocumentEditorContainer', [Toolbar, Ribbon]);

onMounted(() => {
    const container = documenteditorcontainer.value?.ej2Instances;
    // To add the item at the end of the specified group (the item will be added at the end of the Undo group)
    const ribbonItem = {
      type: 'Button',
      buttonSettings: {
        content: 'New',
        iconCss: 'e-icons e-de-ctnr-new',
        clicked: () => {
          container.documentEditor.openBlank();
        }
      }
    };
    container.ribbon.addItem({ tabId: 'Home', index: 0 }, ribbonItem);

    // To add the item before the specified item index (the item will be added before the Redo item in the Undo group)

    container.ribbon.addItem({ tabId: 'Home', index: 0 }, ribbonItem, 1);
});
</script>

Options API (~/src/App.vue)

<template>
<div class="control-section">
    <ejs-documenteditorcontainer ref="doceditcontainer" :toolbarMode="'Ribbon'" 
    :serviceUrl="hostUrl" :enableToolbar='true' height='600px'></ejs-documenteditorcontainer>
</div>
</template>

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

export default {
  components: {
    'ejs-documenteditorcontainer': DocumentEditorContainerComponent,
  },
  provide: {
    DocumentEditorContainer: [Toolbar, Ribbon]
  },
  mounted() {
    const container = this.$refs.doceditcontainer.ej2Instances;
    // To add the item at the end of the specified group (the item will be added at the end of the Undo group)
    const ribbonItem = {
      type: 'Button',
      buttonSettings: {
        content: 'New',
        iconCss: 'e-icons e-de-ctnr-new',
        clicked: () => {
          container.documentEditor.openBlank();
        }
      }
    };
    container.ribbon.addItem({ tabId: 'Home', index: 0 }, ribbonItem);

    // To add the item before the specified item index (the item will be added before the Redo item in the Undo group)

    container.ribbon.addItem({ tabId: 'Home', index: 0 }, ribbonItem, 1);
  }
};
</script>

Online Demo

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

Related Links

• File menu Customization Demo