How to Customize Toolbar in ASP.NET MVC DOCX Editor

27 Aug 20264 minutes to read

How to customize 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 using CustomToolbarItemModel and added alongside existing items in the ToolbarItems property. Newly added item click action can be defined in ToolbarClick.
  • Show, Hide - Existing items can be shown or hidden using the ToolbarItems property. Pre-defined toolbar items are available with ToolbarItem.
  • Enable, Disable - Toolbar items can be enabled or disabled using enableItems.
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditorContainer("container").Created("onDocCreate").EnableToolbar(true).Render()
</div>

<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>

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 the live demo here to see how to customize the toolbar in the ASP.NET MVC DOCX Editor.