Quill JS自定义字号问题：选项显示异常或字号无变化

问题1：所有字号选项显示为'normal' #

原因 #

Quill内置的Size属性器的label方法会将字号值映射到预设名称（如'small'、'large'），自定义px值不在预设映射表中，因此默认显示为'normal'。

解决方法 #

重写Size的label方法，直接返回字号值作为显示名称：

const fontSizeArr = ['8px', '9px', '10px', '12px', '14px', '16px', '20px', '24px', '32px'];

var Size = Quill.import('attributors/style/size');
// 重写label方法，直接返回字号值
Size.label = function(value) {
  return value;
};
Size.whitelist = fontSizeArr;
Quill.register(Size, true);

var toolbarOptions = [
  [{ 'font': [] }],
  [{ 'size': fontSizeArr }],
  ['bold', 'italic', 'underline', 'strike']
];

var quill = new Quill('#editor-container', {
  modules: { toolbar: toolbarOptions },
  theme: 'snow'
});

问题2：字号名称显示正常但文本字号无变化 #

原因 #

Size.whitelist要求传入字符串数组，但你传入了包含value和name的对象数组，导致Quill无法正确识别字号值，应用时无效果；手动修改DOM仅解决了显示问题，未修复核心配置错误。

解决方法 #

1. 将Size.whitelist改为纯字号值的字符串数组；
2. 通过重写Size.label方法实现自定义显示名称，无需手动修改DOM：

const fontSizeArr = [
    { value: '8px', name: '8px' },
    { value: '9px', name: '9px' },
    { value: '10px', name: '10px' },
    { value: '12px', name: '12px' },
    { value: '14px', name: '14px' },
    { value: '16px', name: '16px' },
    { value: '20px', name: '20px' },
    { value: '24px', name: '24px' },
    { value: '32px', name: '32px' }
];

var Size = Quill.import('attributors/style/size');
// 根据value匹配对应的name显示
Size.label = function(value) {
  const sizeItem = fontSizeArr.find(item => item.value === value);
  return sizeItem ? sizeItem.name : value;
};
// 提取value组成字符串数组作为whitelist
Size.whitelist = fontSizeArr.map(item => item.value);
Quill.register(Size, true);

var toolbarOptions = [
  [{ 'font': [] }],
  [{ 'size': fontSizeArr.map(item => item.value)}],
  ['bold', 'italic', 'underline', 'strike']
];

var quill = new Quill('#editor-container', {
  modules: { toolbar: toolbarOptions },
  theme: 'snow'
});

完整可运行代码示例 #

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<div id="editor-container">
    <p></p>
</div>

<script>
const fontSizeArr = [
    { value: '8px', name: '8号' },
    { value: '9px', name: '9号' },
    { value: '10px', name: '10号' },
    { value: '12px', name: '12号' },
    { value: '14px', name: '14号' },
    { value: '16px', name: '16号' },
    { value: '20px', name: '20号' },
    { value: '24px', name: '24号' },
    { value: '32px', name: '32号' }
];

var Size = Quill.import('attributors/style/size');
Size.label = function(value) {
  const sizeItem = fontSizeArr.find(item => item.value === value);
  return sizeItem ? sizeItem.name : value;
};
Size.whitelist = fontSizeArr.map(item => item.value);
Quill.register(Size, true);

var toolbarOptions = [
  [{ 'font': [] }],
  [{ 'size': fontSizeArr.map(item => item.value)}],
  ['bold', 'italic', 'underline', 'strike']
];

var quill = new Quill('#editor-container', {
  modules: { toolbar: toolbarOptions },
  theme: 'snow'
});
</script>

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