Search results

Customize toolbar in JavaScript DocumentEditor control

14 Apr 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.

Copied to clipboard
let toolItem: CustomToolbarItemModel = {
  prefixIcon: "e-de-ctnr-lock",
  tooltipText: "Disable Image",
  text: "Disable Image",
  id: "Custom"
};
let container: DocumentEditorContainer = new DocumentEditorContainer({
  toolbarItems: [toolItem, 'Undo','Redo','Separator','Image','Table','Hyperlink','Bookmark','Comments','TableOfContents','Separator','Header','Footer','PageSetup','PageNumber','Break','Separator','Find','Separator','LocalClipboard','RestrictEditing']
});
container.toolbarClick = (args: ClickEventArgs): void => {
switch(args.item.id){
    case 'Custom':
        //Disable image toolbar item.
        container.toolbar.enableItems(4, false);
        break;
}
};

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