How to Customize Toolbar in ASP.NET Core DOCX Editor

2 Sep 20264 minutes to read

How to customize the existing toolbar in ASP.NET Core Document Editor Container

ASP.NET Core DOCX Editor (Document Editor) Container allows you to customize (add, show, hide, enable, and disable) existing items in a toolbar.

  • Add - New items can be defined using CustomToolbarItemModel and combined with existing items in the ToolbarItems property. The click action for a 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 in ToolbarItem.
  • Enable, Disable - Toolbar items can be enabled or disabled using the enableItems API.
<ejs-documenteditorcontainer id="container" created="onDocCreate"></ejs-documenteditorcontainer>
<script>
    function onDocCreate() {
        var container = document.getElementById("container").ej2_instances[0];
        var toolItem = {
            prefixIcon: "e-de-ctnr-lock",
            tooltipText: "Disable Image",
            text: onWrapText("Disable Image"),
            id: "Custom"
        };
        container.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.toolbarClick = function (args) {
            switch (args.item.id) {
                case 'Custom':
                    //Disable image toolbar item.
                    container.toolbar.enableItems(4, false);
                    break;
            }
        };
    }

    function onWrapText(text) {
        let content = '';
        const index = 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;
    }
</script>
public ActionResult Default()
{
    return View();
}

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

Online demo

Explore how to customize the toolbar in the ASP.NET Core DOCX Editor for working with Word documents in this live ASP.NET Core Toolbar Customization demo.