ReactQuill 默认字体（sans serif、serif、monospace）修改不生效问题咨询

问题原因 #

• 你注释了formats属性，Quill的格式白名单未包含font配置，导致字体修改操作被过滤不生效
• 若未自定义字体配置，font: []的空数组配置仅会加载Quill内置的3种基础字体，且需配套对应CSS样式才能正常渲染

解决步骤 #

1. 启用格式白名单配置 #

取消组件中formats属性的注释，声明支持的格式列表：

// 定义formats配置
const formats = [
  'font', 'size', 'bold', 'italic', 'underline', 'strike',
  'list', 'bullet', 'indent', 'align', 'script', 'color',
  'background', 'link', 'image'
]

// 组件引用时开启formats配置
<ReactQuill
  theme="snow"
  value={value}
  onChange={onChange}
  modules={QuillEditorControlled.modules}
  formats={QuillEditorControlled.formats} // 取消该行注释
/>

完成本步操作后，Quill默认的3种字体即可正常切换使用。

2. （可选）配置自定义字体 #

如果需要使用Quill默认以外的字体，按以下步骤操作：

注册自定义字体到Quill实例

在组件初始化前执行注册逻辑：

import Quill from 'quill';
const FontAttributor = Quill.import('attributors/class/font');
// 替换为你需要的字体标识列表
FontAttributor.whitelist = ['sans-serif', 'serif', 'monospace', 'song', 'yahei'];
Quill.register(FontAttributor, true);

调整toolbar的字体配置

在modules的toolbar配置中填入对应字体标识：

{
  toolbar: [
    [{ font: ['sans-serif', 'serif', 'monospace', 'song', 'yahei'] }],
    // 其余原有配置保持不变
  ]
}

添加配套CSS样式

Quill通过类名匹配字体样式，需要添加对应CSS规则：

/* 下拉选项显示的字体名称 */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=song]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=song]::before {
  content: "宋体";
  font-family: "SimSun", serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=yahei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=yahei]::before {
  content: "微软雅黑";
  font-family: "Microsoft YaHei", sans-serif;
}

/* 编辑器内容区字体生效 */
.ql-font-song {
  font-family: "SimSun", serif;
}
.ql-font-yahei {
  font-family: "Microsoft YaHei", sans-serif;
}

内容的提问来源于stack exchange，提问作者IOrch-K