7

enter image description here

According my question, I want to remove some default toolbar option like a font family or emoji and remain only text style options. How to do that ?

For my editor.

<Editor
    editorState={editorState}
    wrapperClassName="demo-wrapper"
    onEditorStateChange={this.onEditorStateChange}
    toolbar={{
        inline: { inDropdown: true },
        list: { inDropdown: true },
        textAlign: { inDropdown: true },
        link: { inDropdown: true },
        history: { inDropdown: true },
    }}
/>
Nawin P.
  • 223
  • 1
  • 4
  • 11

1 Answers1

17

Pass an array named options containing all options you need in the toolbar property. Here is an array with all available options:

options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'link', 'embedded', 'emoji', 'image', 'remove', 'history']

And here is example containing only text style options and without font family

<Editor
    editorState={editorState}
    wrapperClassName="demo-wrapper"
    onEditorStateChange={this.onEditorStateChange}
    toolbar={{
        options: ['inline', 'blockType', 'fontSize', 'list', 'textAlign', 'history'],
        inline: { inDropdown: true },
        list: { inDropdown: true },
        textAlign: { inDropdown: true },
        link: { inDropdown: true },
        history: { inDropdown: true },
    }}
/>

For more information see: https://jpuri.github.io/react-draft-wysiwyg/#/docs

Nedko Dimitrov
  • 4,350
  • 3
  • 28
  • 30
  • I appreciate your answer..but when putting inline in the options array their comes other unnecessary options like {},x*2,$ ..But how do I remove this ? – Abhishek kumar Nov 25 '21 at 12:02
  • 2
    @Abhishekkumar You can control that by passing array `options` to the `inline` property. Example: `inline: { inDropdown: true, options: ['bold', 'italic', 'underline', 'strikethrough', 'monospace', 'superscript', 'subscript'] }` – Nedko Dimitrov Nov 26 '21 at 07:23
  • 1
    @Abhishekkumar Here is a list of all inline options `inline:{inDropdown:false,className:undefined,component:undefined,dropdownClassName:undefined,options:['bold','italic','underline','strikethrough','monospace','superscript','subscript'],bold:{icon:bold,className:undefined},italic:{icon:italic,className:undefined},underline:{icon:underline,className:undefined},strikethrough:{icon:strikethrough,className:undefined},monospace:{icon:monospace,className:undefined},superscript:{icon:superscript,className:undefined},subscript:{icon:subscript,className:undefined},}` – Nedko Dimitrov Nov 26 '21 at 07:27