Search results

Customize toolbar in React DocumentEditor component

28 Jul 2021 / 2 minutes to read

How to customize existing toolbar in DocumentEditorContainer

DocumentEditorContainer 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
} from "@syncfusion/ej2-react-documenteditor";
DocumentEditorContainerComponent.Inject(Toolbar);
export default class App extends React.Component {
  render() {
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', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing'].