如何更改配置 react-mui-draft-wysiwyg？答案

【问题标题】：how to change confige react-mui-draft-wysiwyg?如何更改配置 react-mui-draft-wysiwyg？
【发布时间】：2022-02-14 03:29:12
【问题描述】：

我使用 HTML 编辑器材质 ui：

import MUIEditor, { MUIEditorState } from "react-mui-draft-wysiwyg";

 <MUIEditor
    editorState={formElement.editorState}
    onChange={formElement.onChange}
  />

我想删除工具栏中的字体颜色按钮。当我转到节点模块的 MUIEditor 文件时，我想对该文件进行一些更改，但即使我得到一个控制台，它似乎也没有改变，我看不到结果。我该怎么办？

 .node_modules
        .react-mui-draft-wysiwyg
           .dist
             .index.js

【问题讨论】：

标签： javascript reactjs material-ui node-modules html-editor

【解决方案1】：

很少建议编辑/node_modules 的内容——相反react-mui-draft-wysiwyg 提供了一种通过config 属性在您自己的React 代码中直接自定义工具栏配置的方法。

在您的情况下，要隐藏字体颜色按钮，您只需传入您想要显示的菜单选项即可。（即删除/注释掉toolbarControlTypes.fontColor 选项）。例如：

    import MUIEditor, {
      MUIEditorState,
      toolbarControlTypes // Added toolbarControlTypes
    } from "react-mui-draft-wysiwyg";

...

    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={{
        toolbar: {
          controls: [
            toolbarControlTypes.undo,
            toolbarControlTypes.redo,
            toolbarControlTypes.divider,
            toolbarControlTypes.bold,
            toolbarControlTypes.italic,
            toolbarControlTypes.underline,
            toolbarControlTypes.strikethrough,
            // Include all of the default toolbar options except for fontColor
            // toolbarControlTypes.fontColor,
            toolbarControlTypes.fontBackgroundColor,
            toolbarControlTypes.divider,
            toolbarControlTypes.linkAdd,
            toolbarControlTypes.linkRemove,
            toolbarControlTypes.image,
            toolbarControlTypes.divider,
            toolbarControlTypes.blockType,
            toolbarControlTypes.fontSize,
            toolbarControlTypes.fontFamily,
            toolbarControlTypes.textAlign,
            toolbarControlTypes.divider,
            toolbarControlTypes.unorderedList,
            toolbarControlTypes.orderedList
          ]
        }
      }}
    />

文档：Default Configuration Options

工作代码沙盒：https://codesandbox.io/s/mui4-draft-wysiwyg-bre8e?file=/demo.js

【讨论】：