Customize Document Editor Toolbar

[Babar Ali]

I want to hide some items from document editor toolbar..

Such as: New, Open

What should I do? Please clarify

[Suriya Murugan]

Hi Babar, 

Currently, DocumentEditor does not have support to remove particulat options in toolbar. Using css property, you hide the toolbar items. 

  

Please check below sample code to remove new and open. Similarly, you can hide based on your requirement. 

  

Sample code 

  

div.e-de-ctnr-toolbar > div.e-de-tlbr-wrapper > div > div > div:nth-child(2){ 

display: none; 

} 

div.e-de-ctnr-toolbar > div.e-de-tlbr-wrapper > div > div > div:nth-child(1){ 

display: none; 

} 

  

  

Please let me know if you have any questions. 

Regards, 

Suriya M. 

[Deepak Jain]

If you are using DocumentEditorContainer than you can use hideItem method in ts

@ViewChild('document_editor')

    public documentContainer: DocumentEditorContainerComponent;

this.documentContainer.toolbarModule.toolbar.hideItem(0, true)

this.documentContainer.toolbarModule.toolbar.hideItem(1, true);

[Kesavan D]

Hi Deepak, 

ToolbarModule of DocumentEditiorContainerComponent is an internal property and it can be changed without any release information in future if needed so we recommend you to use the available public API to achieve your functionality. 

API Documentation: https://ej2.syncfusion.com/angular/documentation/api/document-editor-container 

Regards 

Kesavan. 

[Deepak Jain]

Than you should provide any list of properties, so that code can decide that toolbar button new or edit needs to be available for user for conditional case

Like in any case application does not allow user to add new document from toolbar or open existing document from toolbar. In case of print only the document with small changes does not required any new or open button in my case.

CSS solution is not the best solution, you should provide that can be handled through ts code.

Thanks

[Harini Chellappa]

Hi Deepak, 

We have planned to provide support for customizing toolbar options. We will implement this feature in any of our upcoming release. will update scheduled status of the below feedback link once it is taken for implementation and update you once this feature is implemented.   

  

This feature can be tracked through below feedback links:   

   

https://www.syncfusion.com/feedback/9251/add-support-to-customize-toolbar-options 

  

Regards, 

Harini C 

[Harini Chellappa]

Hi Deepak, 

We are glad to announce that our 2020 Vol1 beta release (v18.1.36-beta) is rolled out successfully. We have included toolbar customization feature. 

Please download the latest version NuGet packages from below link. 

https://www.npmjs.com/package/@syncfusion/ej2-angular-documenteditor/v/18.1.36-beta 

Demo 

https://ej2.syncfusion.com/beta/angular/demos/#/material/document-editor/toolbar-customization 

 

Adding Items 

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 items 

Existing items can be shown or hidden using the toolbarItems property. Pre-defined toolbar items are available with ToolbarItem. 

Enabe/ Disable toolbar items 

We have provided toolbar object in public. Hence you can use enableItems of toolbar object to enable, disable items. 

Sample Code Snippet 

To enable disable items in toolbar, please refer below code snippets. 

 

containerInstance.toolbar.enableItems(0, false); // disables first item in the toolbar. 

 

For adding/removing/show/hide, please refer below code snippets 

 

 <ejs-documenteditorcontainer #documenteditor_default [enableToolbar]=true [locale]="culture"  [toolbarItems]=items (toolbarClick)="onToolbarClick($event)" style="display:block;height:600px"></ejs-documenteditorcontainer> 

 

Script 

 

public items = [ 

    "Open", 

    "New", 

    { 

      prefixIcon: "e-de-ctnr-pagenumber", 

      tooltipText: "Custom toolbar item", 

      text: "Custom toolbar item", 

      id: "Custom", 

      cssClass: "e-de-toolbar-btn" 

    }, 

    "Separator",     

    "Image", 

    "Break", 

    "Bookmark", 

    "Separator", 

    "Hyperlink", 

    "RestrictEditing" 

  ]; 

  onToolbarClick(args): void { 

    if (args.item.id == "Custom") { 

            //Disable image toolbar item. 

            container.toolbar.enableItems(4, false); 

    } 

  } 

 

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

Regards, 

Harini C