Customize tool bar in React Document editor component

5 Aug 20247 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: onWrapText("Disable Image"),
              id: "Custom"
          };
          let items = [
              toolItem,
              "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",
              "ContentControl"
          ];
          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;
          }
      };
      onWrapText = (text: string): string=> {
        let content: string = '';
          const index : number = text.lastIndexOf(' ');
      
          if (index !== -1) {
              content = text.slice(0, index) + "<div class='e-de-text-wrap'>" + text.slice(index + 1) + "</div>";
          } else {
              content = text;
          }
      
          return content;
      }
  }

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