How to Customize Toolbar in TypeScript DOCX Editor

14 Aug 20263 minutes to read

How to customize the existing toolbar in DocumentEditorContainer

DocumentEditorContainer allows you to customize (add, show, hide, enable, and disable) existing items in a toolbar.

  • Add - New items can be defined by CustomToolbarItemModel along with the existing items in the toolbarItems property. The click action for the newly added item can be defined in toolbarClick.

  • Show, Hide - Existing items can be shown or hidden using the toolbarItems property. Predefined toolbar items are available with ToolbarItem.

  • Enable, Disable - Toolbar items can be enabled or disabled using enableItems.

let toolItem: CustomToolbarItemModel = {
    prefixIcon: "e-de-ctnr-lock",
    tooltipText: "Disable Image",
    text: onWrapText("Disable Image"),
    id: "Custom"
};

//Initialize Document Editor Container component with custom toolbar item.
let container: DocumentEditorContainer = new DocumentEditorContainer({
    toolbarItems: [toolItem, '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']
});
container.appendTo('#container');
//To handle custom toolbar click event.
container.toolbarClick = (args: ClickEventArgs): void => {
    switch (args.item.id) {
        case 'Custom':
            //Disable the Image toolbar item.
            container.toolbar.enableItems(4, false);
            break;
    }
};

function onWrapText(text: string): string {
  let content: string = '';
    const index: number = text.lastIndexOf(' ');

    if (index !== -1) {
        content = text.slice(0, index) + "<div class='e-de-text-wrap'>" + text.slice(index + 1) + "</div>";
    } else {
        content = text;
    }

    return content;
}

The default value of the toolbarItems property 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'].

Online Demo

Explore how to customize the toolbar in the JavaScript DOCX Editor for working with Word documents in this live demo here.