Customize tool bar in Vue Document editor component
16 Jul 20244 minutes 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.
- Add - New items can defined by
CustomToolbarItemModel
and with existing items intoolbarItems
property. Newly added item click action can be defined intoolbarclick
. - Show, Hide - Existing items can be shown or hidden using the
toolbarItems
property. Pre-defined toolbar items are available withToolbarItem
. - Enable, Disable - Toolbar items can be enabled or disable using
enableItems
<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 items = [
{
prefixIcon: "e-de-ctnr-lock",
tooltipText: "Disable Image",
text: "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>
<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: [
{
prefixIcon: "e-de-ctnr-lock",
tooltipText: "Disable Image",
text: "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]
},
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','ContentControl']
.