如何删除 react-draft-wysiwyg 工具栏中的默认选项？答案

【问题标题】：How to remove default option in toolbar of react-draft-wysiwyg?如何删除 react-draft-wysiwyg 工具栏中的默认选项？
【发布时间】：2020-11-14 05:34:54
【问题描述】：

根据我的问题，我想删除一些默认的工具栏选项，例如字体系列或表情符号，并且只保留文本样式选项。该怎么做？

为了我的编辑。

<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 },
    }}
/>

【问题讨论】：

标签： reactjs editor rich-text-editor draftjs react-draft-wysiwyg

【解决方案1】：

传递一个名为 options 的数组，其中包含 toolbar 属性中所需的所有选项。这是一个包含所有可用选项的数组：

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

这里是仅包含文本样式选项且不包含字体系列的示例

<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 },
    }}
/>

欲了解更多信息，请参阅：https://jpuri.github.io/react-draft-wysiwyg/#/docs

【讨论】：

感谢您的回答..但是当将内联放入选项数组时，它们会出现其他不必要的选项，例如 {},x*2,$ ..但是如何删除它？
@Abhishekkumar 您可以通过将数组options 传递给inline 属性来控制它。示例：inline: { inDropdown: true, options: ['bold', 'italic', 'underline', 'strikethrough', 'monospace', 'superscript', 'subscript'] }
@Abhishekkumar 这是所有内联选项的列表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},}