QuillJS 2.0自定义数值字号控件失效求助：默认字号可正常使用

数据老陈

2026-6-15

QuillJS 2 自定义数值字号失效解决方案

问题原因

QuillJS 2 默认使用基于类名的 Size 属性器（attributors/class/size），仅支持预设关键字（normal/large/huge），通过添加 ql-size-* 类实现字号控制。而你需要的数值字号（如 10px/2pt）需要使用基于行内样式的属性器（attributors/style/size），直接设置元素的 font-size 样式，才能被正确识别并写入 Delta。

解决步骤

1. 替换默认的 Size 属性器

在 Quill 初始化前，导入并注册样式版的 Size 属性器，覆盖默认的类名版本：

// 务必在Quill实例化前执行
const Size = Quill.import('attributors/style/size');
// 配置允许的字号列表，包含自定义数值和预设关键字
Size.whitelist = ['2pt', '3pt', '4pt', '10px', '12px', '14px', 'large', 'huge'];
// 强制覆盖注册
Quill.register('attributors/style/size', Size, true);

2. 修正工具栏选项（移除重复项）

你的 HTML 中有重复的 4pt 选项，先修正避免逻辑混淆：

<select class="ql-size">
  <option value="2pt">2 pt</option>
  <option value="3pt">3 pt</option>
  <option value="4pt">4 pt</option>
  <option value="10px">10px</option>
  <option value="12px">12px</option>
  <option value="14px">14px</option>
  <option value="large">large</option>
  <option value="huge">huge</option>
</select>

3. 自定义工具栏 Handler（可选，默认处理失效时用）

如果上述步骤后数值字号仍不生效，说明默认工具栏逻辑未适配数值格式，需手动添加 Handler：

const quill = new Quill('#editor', {
  modules: {
    toolbar: {
      container: '#toolbar', // 替换为你的工具栏容器选择器
      handlers: {
        size: function(value) {
          value ? this.quill.format('size', value) : this.quill.format('size', false);
        }
      }
    }
  },
  theme: 'snow'
});