Add save button in EJ2 TypeScript Document editor toolbar

6 Jul 20242 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.

import { DocumentEditorContainer, CustomToolbarItemModel, Toolbar } from '@syncfusion/ej2-documenteditor';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
DocumentEditorContainer.Inject(Toolbar);

let hostUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
let toolItem: CustomToolbarItemModel = {
    prefixIcon: "e-save icon",
    tooltipText: "Save the Document",
    text: "Save",
    id: "save"
};

//Initialize Document Editor Container component with custom toolbar item.
let container: DocumentEditorContainer = new 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: ClickEventArgs): void => {
    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'].