Custom Toolbar Integration with DocumentEditorContainerComponent

[Harrison Schatz]

Hello everyone,

I'm currently working with the Syncfusion Vue components, specifically using `ejs-documenteditorcontainer` (DocumentEditorContainerComponent) and `ejs-toolbar` (ToolbarComponent). My issue arises with the built-in toolbar provided by the DocumentEditorContainerComponent. I find that its appearance and layout don't quite meet the needs of my project, and I would prefer to customize it further.

I've attempted to use the separate ToolbarComponent to create a custom toolbar, hoping to interact with the DocumentEditorContainer. However, I'm struggling to make the ToolbarComponent effectively communicate and control the DocumentEditorContainer's functions.

Has anyone successfully implemented a custom external toolbar that interacts with the DocumentEditorContainer? If so, could you share your approach or any tips on how to achieve this integration? Any examples or guidance would be greatly appreciated!

Thank you in advance for your help!

[Dhanush Sekar]

Hi Harrison,

We have provided public API's for toolbar button. Please refer the below table.

Toolbar button	Public API
New	this.$refs.doceditcontainer.ej2Instances.documentEditor.openBlank();
Open	Add input tag with type file. Trigger impoprt webAPI call in file change event. Use document editor Open API to open sfdt document   <template> <input type="file" ref="fileUpload" v-on:change="onFileUpload" accept=".dotx,.docx,.docm,.dot,.doc,.rtf,.txt,.xml,.sfdt" style="position:fixed; left:-100em" />   <div id="app"> <div>                   <button v-on:click='openFileButtonClickHandler'>Import</button>             </div>       <ejs-documenteditorcontainer :serviceUrl='serviceUrl' :enableToolbar='true' v-bind:documentChange="onDocumentChange" v-bind:created="onCreated" ref="documentEditorContainer" height='590px'> </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 { serviceUrl:'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/'}       },       provide: {           //Inject require modules.           DocumentEditorContainer: [Toolbar]       },       methods: {            loadFile: function(file: File): void {                 let ajax: XMLHttpRequest = new XMLHttpRequest();                 ajax.open('POST', 'https://localhost:4000/api/documenteditor/Import', true);                 ajax.onreadystatechange = () => {                     if (ajax.readyState === 4) {                         if (ajax.status === 200 || ajax.status === 304) {                             // open SFDT text in document editor                             this.$refs.doceditcontainer.ej2Instances.documentEditor.open(ajax.responseText);                         }                     }                 }                 let formData: FormData = new FormData();                 formData.append('files', file);                 ajax.send(formData);             },             openFileButtonClickHandler: function() {                 this.$refs.fileUpload.click();             },             onFileUpload: function(e) {                 if (e.target.files[0]) {                     let file = e.target.files[0];                     if (file.name.substr(file.name.lastIndexOf('.')) === '.sfdt') {                         let fileReader: FileReader = new FileReader();                         fileReader.onload = (e: any) => {                             let contents: string = e.target.result;                             this.$refs.doceditcontainer.ej2Instances.documentEditor.open(contents);                         };                         fileReader.readAsText(file);                     }                     else {                         this.$refs.loadFile(file);                     }                 }             }       },     } </script>   <style>     @import '../node_modules/@syncfusion/ej2-base/styles/material.css';     @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';     @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';     @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';     @import '../node_modules/@syncfusion/ej2-lists/styles/material.css';     @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';     @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';     @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';     @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css"; </style>
Undo	If(this.$refs.doceditcontainer.ej2Instances.documentEditor.editorHistory.canUndo){ this.$refs.doceditcontainer.ej2Instances.documentEditor.undo() } Documentation: EditorHistory API in Vue DocumentEditor API component - Syncfusion
Redo	If(this.$refs.doceditcontainer.ej2Instances.documentEditor.editorHistory.canRedo){ this.$refs.doceditcontainer.ej2Instances.documentEditor.redo() } Documentation: EditorHistory API in Vue DocumentEditor API component - Syncfusion
Image	Add input tag with type file. Add accept attribute like below accept: '.jpg,.jpeg,.png,.bmp,.svg'. Insert image on file change event. onImageChange() {   const file: File = imagePicker.files[0];   const fileReader: FileReader = new FileReader();   fileReader.onload = (): void => {     this.$refs.doceditcontainer.ej2Instances.documentEditor.editor.insertImage(fileReader.result as string);   };   fileReader.readAsDataURL(file); } Documentation: Editor API in Vue DocumentEditor API component - Syncfusion
Table	showTableDialog: function() {                   //Open the table dialog.                   this.$refs.doceditcontainer.ej2Instances.documentEditor.showDialog('Table');               } Documentation: Editor API in Vue DocumentEditor API component - Syncfusion
Hyperlink	showHyperlinkDialog: function() {                   //Opens hyperlink dialog.                   this.$refs.doceditcontainer.ej2Instances.documentEditor.showDialog('Hyperlink');               } Documentation: Editor API in Vue DocumentEditor API component - Syncfusion
Bookmark	showBookmarkDialog: function() {                   //Open the bookmark dialog.                  this.$refs.doceditcontainer.ej2Instances.documentEditor .showDialog('Bookmark');               } Documentation: Editor API in Vue DocumentEditor API component - Syncfusion
Table of contents	showTableOfContentsDialog: function() {                     //Open the table of contents dialog.                     this.$refs.doceditcontainer.ej2Instances.documentEditor.showDialog('TableOfContents');                 } Documentation: Editor API in Vue DocumentEditor API component - Syncfusion
Header	this.$refs.doceditcontainer.ej2Instances.documentEditor..selection.goToHeader(); Documentation: Selection API in Vue DocumentEditor API component - Syncfusion
Footer	this.$refs.doceditcontainer.ej2Instances.documentEditor..selection.goToFooter(); Documentation: Selection API in Vue DocumentEditor API component - Syncfusion
Page setup	showPageSetupDialog: function() {                   //Open page setup dialog.                  this.$refs.doceditcontainer.ej2Instances.documentEditor.showDialog('PageSetup');               }
Page Number	Documentation: Editor API in Vue DocumentEditor API component - Syncfusion
Break	Documentation: Editor API in Vue DocumentEditor API component - Syncfusion
Footnote	Documentation: Editor API in Vue DocumentEditor API component - Syncfusion
Endnote	Documentation: Editor API in Vue DocumentEditor API component - Syncfusion
Find & Replace	this.$refs.doceditcontainer.ej2Instances.documentEditor.showOptionsPane(); Documentation: Find and replace in Vue Document editor component | Syncfusion
Comment	Documentation: Editor API in Vue DocumentEditor API component - Syncfusion
Track changes	this.$refs.doceditcontainer.ej2Instances.documentEditor.enableTrackChanges = true;
Local Clipboard	Documentation: Vue DocumentEditor API component - Syncfusion
Restrict Editing	//Enable read only mode.             this.$refs.documentEditorContainer.restrictEditing = true; // Open restrict editing pane this.$refs.doceditcontainer.ej2Instances.documentEditor. showRestrictEditingPane();
Form Field	Documentation: Editor API in Vue DocumentEditor API component - Syncfusion
Update Fields	Documentation: Vue DocumentEditor API component - Syncfusion

Regards,

Dhanush Sekar