Add save button in EJ2 JavaScript Document editor toolbar

3 May 20251 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;
}
};

```

The Web API hosted link https://services.syncfusion.com/js/production/api/documenteditor/ utilized in the Document Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.

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