Document Editor Container allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar.
CustomToolbarItemModel and with existing items in toolbarItems property. Newly added item click action can be defined in toolbarclick.toolbarItems property. Pre-defined toolbar items are available with ToolbarItem.enableItemsimport { Component, ViewChild } from '@angular/core';
import { ClickEventArgs } from '@syncfusion/ej2-navigations'
import { DocumentEditorContainerComponent, ToolbarService, CustomToolbarItemModel } from '@syncfusion/ej2-angular-documenteditor';
@Component({
selector: 'app-root',
template: '<ejs-documenteditorcontainer [height]="600px" [toolbarItems]=items (toolbarClick)="onToolbarClick($event)" #documenteditor_default style="display:block;" [enableToolbar]=true></ejs-documenteditorcontainer>',
styleUrls: ['./app.component.css'],
providers: [ToolbarService]
})
export class AppComponent {
@ViewChild('documenteditor_default', { static: true })
container: DocumentEditorContainerComponent;
//Custom toolbat item.
public toolItem: CustomToolbarItemModel = {
prefixIcon: "e-de-ctnr-lock",
tooltipText: "Disable Image",
text: "Disable Image",
id: "Custom"
};
public items = [this.toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing'];
public onToolbarClick(args: ClickEventArgs): void {
switch (args.item.id) {
case 'Custom':
//Disable image toolbar item.
this.container.toolbar.enableItems(4, false);
break;
}
};
}Note: Default value of toolbarItems is ['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'Separator', 'Find', 'Separator','Comments','TrackChanges','Separator', 'LocalClipboard', 'RestrictEditing','Separator','FormFields','UpdateFields'].