如何隐藏React Draft Wysiwyg工具栏多余工具并调整顺序？

当然可以搞定，React Draft Wysiwyg 本身就支持通过自定义 toolbar 配置来精准控制工具栏显示的工具项和排列顺序，结合你给出的现有代码和期望样式，直接看下面的实现方案：

先明确你期望的工具栏布局（对应你提供的样式图）：从左到右依次是「段落格式下拉菜单」「加粗按钮」「斜体按钮」「下划线按钮」「列表下拉菜单」「字体大小下拉菜单」。

第一步：修改 Toolbar 配置 #

直接调整 toolbar 对象，通过 options 数组控制整体顺序，同时移除不需要的工具配置：

const toolbar = {
  // 数组顺序就是工具栏模块的显示顺序
  options: ['blockType', 'inline', 'list', 'fontSize'],
  // 段落格式下拉（对应第一个下拉模块）
  blockType: {
    inDropdown: true,
    options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'],
    className: undefined,
    component: undefined,
    dropdownClassName: undefined
  },
  // 行内样式：直接显示加粗、斜体、下划线按钮
  inline: {
    inDropdown: false,
    options: ['bold', 'italic', 'underline'],
    className: undefined,
    component: undefined,
    dropdownClassName: undefined
  },
  // 列表下拉（包含有序、无序列表）
  list: {
    inDropdown: true,
    options: ['unordered', 'ordered'],
    className: undefined,
    component: undefined,
    dropdownClassName: undefined
  },
  // 字体大小下拉
  fontSize: {
    inDropdown: true,
    options: [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96],
    className: undefined,
    component: undefined,
    dropdownClassName: undefined
  }
};

关键说明 #

• 控制排列顺序：options 数组的元素顺序就是工具栏各个模块的显示顺序，完全按照你要的布局来排列即可。
• 隐藏不必要工具：只要不添加某个工具的配置项（比如颜色、链接、引用这些你不需要的），工具栏就不会渲染它们。
• 下拉/按钮切换：每个模块的 inDropdown 属性设为 true 就会变成下拉菜单，设为 false 就直接显示单个按钮，和你的期望样式匹配。
• 细化模块内工具：每个模块的 options 数组可以筛选该模块下的具体工具，比如 inline 只保留了加粗、斜体、下划线，去掉了其他不需要的行内样式。

第二步：修正 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}
/>

这样配置后，工具栏就会完全匹配你的期望样式了。

内容的提问来源于stack exchange，提问作者Eshan Rajapakshe