React JS中如何修改WYSIWYG编辑器工具栏默认值及下拉选项

一、修改字号下拉框显示为「16px」 #

核心是给字号选项配置显示标签（带px）和实际生效值，确保默认选中项显示为16px。以下以常用的react-quill为例：

1. 自定义工具栏中的字号下拉框：

const CustomToolbar = () => (
  <div className="toolbar">
    {/* 字号下拉框 */}
    <select className="ql-size">
      <option value="10">10px</option>
      <option value="12">12px</option>
      <option value="14">14px</option>
      <option value="16" selected>16px</option> {/* 默认选中16px */}
      <option value="18">18px</option>
      <option value="24">24px</option>
      <option value="36">36px</option>
    </select>
    {/* 其他工具栏按钮... */}
  </div>
);

2. 在编辑器组件中禁用默认工具栏，使用自定义工具栏：

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const MyEditor = () => {
  return (
    <div>
      <CustomToolbar />
      <ReactQuill
        theme="snow"
        modules={{ toolbar: false }} // 禁用默认工具栏
        placeholder="开始编辑..."
      />
    </div>
  );
};

二、自定义字体列表（仅保留Arial、Times New Roman、Roman） #

同样以react-quill为例，需要修改字体下拉框选项，并添加对应CSS样式：

1. 在自定义工具栏中添加字体下拉框：

const CustomToolbar = () => (
  <div className="toolbar">
    {/* 字号下拉框... */}
    {/* 字体下拉框 */}
    <select className="ql-font">
      <option value="arial">Arial</option>
      <option value="times-new-roman">Times New Roman</option>
      <option value="roman">Roman</option>
    </select>
  </div>
);

2. 添加对应字体的CSS样式，确保编辑器能正确渲染字体：

.ql-font-arial {
  font-family: 'Arial', sans-serif;
}
.ql-font-times-new-roman {
  font-family: 'Times New Roman', serif;
}
.ql-font-roman {
  font-family: 'Roman', serif;
}

通用思路（适用于其他WYSIWYG编辑器） #

如果使用Draft.js、TinyMCE等其他编辑器，核心逻辑一致：

• 字号：给每个选项设置独立的「显示文本（带px）」和「实际生效值」，默认选中16px对应的选项。
• 字体：过滤掉默认字体列表，只保留指定的三个选项，同时配置对应字体的样式规则。

内容的提问来源于stack exchange，提问作者aji bala