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

Question

我使用 HTML 编辑器 material ui :

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

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

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

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

Answer 1

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

在您的情况下，要隐藏字体颜色按钮，您只需传入要显示的菜单选项。（即 remove/comment 出 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

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

how to change confige react-mui-draft-wysiwyg?

javascript

reactjs

material-ui

node-modules

html-editor