Customize existing toolbar
5 Jul 20243 minutes to read
How to customize existing toolbar in DocumentEditorContainer
DocumentEditorContainer allows to customize (add, show, hide, enable, and disable) existing items in a toolbar.
- Add - New items can be defined by
CustomToolbarItemModel
and with existing items inToolbarItems
property. Newly added item click action can be defined inToolbarclick
. - Show, Hide - Existing items can be shown or hidden using the
ToolbarItems
property. Pre-defined toolbar items are available withToolbarItem
. - Enable, Disable - Toolbar items can be enabled or disabled using
enableItems
<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', '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;
}
};
}
</script>
NOTE
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']
.