Add save button in EJ2 JavaScript Document editor toolbar

6 Jul 20241 minute 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.

ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
var hostUrl = ‘https://services.syncfusion.com/js/production/api/documenteditor/’;
let toolItem = {
prefixIcon: “e-save icon”,
tooltipText: “Save the Document”,
text: “Save”,
id: “save”
};

var container = new ej.documenteditor.DocumentEditorContainer({ toolbarItems: [‘New’, ‘Open’, toolItem, ‘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’], serviceUrl: hostUrl, height: ‘590px’ });

container.appendTo(“#container”);
//To handle custom toolbar click event.
container.toolbarClick = (args) => {
switch (args.item.id) {
case ‘save’:
//Save the document(Download the document)
container.documentEditor.save(‘sample’, ‘Docx’);
break;
}
};

```

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'].