|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Add save button in Vue Document editor toolbar | Syncfusion |
| 4 | +description: Learn here to add save button in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more. |
| 5 | +control: Add save button tool bar |
| 6 | +platform: ej2-vue |
| 7 | +documentation: ug |
| 8 | +domainurl: ##DomainURL## |
| 9 | +--- |
| 10 | + |
| 11 | +# Add save button in Vue Document editor toolbar |
| 12 | + |
| 13 | +## To add a save button to the existing toolbar in DocumentEditorContainer |
| 14 | + |
| 15 | +DocumentEditorContainer allows you to add a new button to the existing items in a toolbar using [`CustomToolbarItemModel`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/customToolbarItemModel/) and with existing items in [`toolbarItems`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/#toolbaritems) property. Newly added item click action can be defined in [`toolbarclick`](https://ej2.syncfusion.com/vue/documentation/api/toolbar/clickEventArgs/). |
| 16 | + |
| 17 | +{% tabs %} |
| 18 | +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} |
| 19 | + |
| 20 | +<template> |
| 21 | + <div id="app"> |
| 22 | + <ejs-documenteditorcontainer ref="container" :toolbarItems='items' v-bind:toolbarClick='onToolbarClick' |
| 23 | + :enableToolbar='true'> </ejs-documenteditorcontainer> |
| 24 | + </div> |
| 25 | +</template> |
| 26 | + |
| 27 | +<script setup> |
| 28 | +import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor'; |
| 29 | +import { provide, ref } from 'vue'; |
| 30 | + |
| 31 | +const container = ref(null); |
| 32 | +const items = [ |
| 33 | + 'New', 'Open', 'Separator', |
| 34 | + { |
| 35 | + prefixIcon: "e-save icon", |
| 36 | + tooltipText: "Save the Document", |
| 37 | + text: "Save", |
| 38 | + id: "save" |
| 39 | + }, |
| 40 | + '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'] |
| 41 | + |
| 42 | +provide('DocumentEditorContainer', [Toolbar]); |
| 43 | + |
| 44 | +const onToolbarClick = function (args) { |
| 45 | + switch (args.item.id) { |
| 46 | + case 'save': |
| 47 | + //Disable image toolbar item. |
| 48 | + container.value.ej2Instances.documentEditor.save('sample', 'Docx'); |
| 49 | + break; |
| 50 | + } |
| 51 | +} |
| 52 | +</script> |
| 53 | + |
| 54 | +{% endhighlight %} |
| 55 | +{% highlight html tabtitle="Options API (~/src/App.vue)" %} |
| 56 | + |
| 57 | +<template> |
| 58 | + <div id="app"> |
| 59 | + <ejs-documenteditorcontainer ref="container" :toolbarItems='items' v-bind:toolbarClick='onToolbarClick' |
| 60 | + :enableToolbar='true'> </ejs-documenteditorcontainer> |
| 61 | + </div> |
| 62 | +</template> |
| 63 | + |
| 64 | +<script> |
| 65 | +import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor'; |
| 66 | + |
| 67 | +export default { |
| 68 | + components: { |
| 69 | + 'ejs-documenteditorcontainer': DocumentEditorContainerComponent |
| 70 | + }, |
| 71 | + data() { |
| 72 | + return { |
| 73 | + items: [ |
| 74 | + 'New','Open','Separator', |
| 75 | + { |
| 76 | + prefixIcon: "e-save icon", |
| 77 | + tooltipText: "Save the Document", |
| 78 | + text: "Save", |
| 79 | + id: "save" |
| 80 | + }, |
| 81 | + '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'] |
| 82 | + } |
| 83 | + }, |
| 84 | + provide: { |
| 85 | + DocumentEditorContainer: [Toolbar] |
| 86 | + }, |
| 87 | + methods: { |
| 88 | + onToolbarClick: function (args) { |
| 89 | + switch (args.item.id) { |
| 90 | + case 'save': |
| 91 | + //Save the document(Download the document) |
| 92 | + this.$refs.container.ej2Instances.documentEditor.save('sample', 'Docx'); |
| 93 | + break; |
| 94 | + } |
| 95 | + } |
| 96 | + } |
| 97 | +} |
| 98 | +</script> |
| 99 | + |
| 100 | +{% endhighlight %} |
| 101 | +{% endtabs %} |
| 102 | + |
| 103 | +>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']`. |
0 commit comments