ASP.NET Core
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Customize toolbar in ASP.NET Core DocumentEditor control

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