Hide some tools from React Draft Wysiwyg text editor toolbar

765 Views Asked by At

Is there any way to hide some unnecessary tools from the React Draft Wysiwyg toolbar and change the toolbar order?

Editor:

<Editor
  editorState={editorState}
  onEditorStateChange={handleEditorChange}
  wrapperClassName="custom-rich-text-editor-wrapper"
  editorClassName="custom-rich-text-editor"
  toolbarClassName="custom-rich-text-editor-toolbar"
  toolbar={toolbar}
  }}
/>

Toolbar:

   const toolbar = {
      list: { inDropdown: true },
      inline: {
        inDropdown: false,
        className: undefined,
        component: undefined,
        dropdownClassName: undefined,
        options: ['bold', 'italic', 'underline']
      },
      fontSize: {}
   };

Expecting toolbar:

enter image description here

1

There are 1 best solutions below

1
On

Fond the answer:

there is a options property

<Editor
  editorState={editorState}
  onEditorStateChange={handleEditorChange}
  wrapperClassName="custom-rich-text-editor-wrapper"
  editorClassName="custom-rich-text-editor"
  toolbarClassName="custom-rich-text-editor-toolbar"
  toolbar={
    {options: ['inline', 'blockType', 'fontSize']}
  }
/>