Add save button in Vue Document editor toolbar
16 Jul 20244 minutes to read
To add a save button to the existing toolbar in DocumentEditorContainer
DocumentEditorContainer allows you to add a new button to the existing items in a toolbar using CustomToolbarItemModel
and with existing items in toolbarItems
property. Newly added item click action can be defined in toolbarclick
.
<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 = [
'New', 'Open', 'Separator',
{
prefixIcon: "e-save icon",
tooltipText: "Save the Document",
text: "Save",
id: "save"
},
'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 'save':
//Disable image toolbar item.
container.value.ej2Instances.documentEditor.save('sample', 'Docx');
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: [
'New','Open','Separator',
{
prefixIcon: "e-save icon",
tooltipText: "Save the Document",
text: "Save",
id: "save"
},
'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 'save':
//Save the document(Download the document)
this.$refs.container.ej2Instances.documentEditor.save('sample', 'Docx');
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']
.