Customize tool bar in React Document editor component

30 Jan 20235 minutes to read

How to customize existing toolbar in DocumentEditorContainer

Document Editor Container 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

  import "./App.css";
  import * as React from "react";
  import { DocumentEditorContainerComponent, Toolbar, CustomToolbarItemModel } from "@syncfusion/ej2-react-documenteditor";
  DocumentEditorContainerComponent.Inject(Toolbar);
  export default class App extends React.Component {
      public container: DocumentEditorContainerComponent;
      render() {
          //Custom toolbar item.
          let toolItem: CustomToolbarItemModel = {
              prefixIcon: "e-de-ctnr-lock",
              tooltipText: "Disable Image",
              text: "Disable Image",
              id: "Custom"
          };
          let items = [
              toolItem,
              "Undo",
              "Redo",
              "Separator",
              "Image",
              "Table",
              "Hyperlink",
              "Bookmark",
              "Comments",
              "TableOfContents",
              "Separator",
              "Header",
              "Footer",
              "PageSetup",
              "PageNumber",
              "Break",
              "Separator",
              "Find",
              "Separator",
              "LocalClipboard",
              "RestrictEditing"
          ];
          return (
              <DocumentEditorContainerComponent
                  ref={scope => {
                      this.container = scope;
                  }}
                  id="container"
                  style=
                  toolbarItems={items}
                  toolbarClick={this.onToolbarClick.bind(this)}
                  enableToolbar={true}
              />
          );
      }
      onToolbarClick = (args: ClickEventArgs): void => {
          switch (args.item.id) {
              case "Custom":
                  //Disable image toolbar item.
                  this.container.toolbar.enableItems(4, false);
                  break;
              default:
                  break;
          }
      };
  }

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