Search results

Customize toolbar in React DocumentEditor component

15 Oct 2021 / 2 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.

Copied to clipboard
  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={{ height: "590px" }}
              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'].