ASP.NET Core
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Customize toolbar in ASP.NET Core DocumentEditor control

15 Oct 2021 / 1 minute 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 defined by CustomToolbarItemModel and with existing items in 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 disable using enableItems
tagHelper
Copied to clipboard
<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: "Disable Image",
            id: "Custom"
        };
        container.toolbarItems = [toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing'];
        container.toolbarClick = function (args) {
            switch (args.item.id) {
                case 'Custom':
                    //Disable image toolbar item.
                    container.toolbar.enableItems(4, false);
                    break;
            }
        };
    }
</script>

Note: Default value of ToolbarItems is ['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing'].

Previous
Next