Vue3中Quill编辑器自定义px字号后显示异常求助

问题根源 #

1. 监听事件选择不当：text-change仅在内容修改时触发，无法覆盖光标移动到已设置字号文本等需要同步工具栏状态的场景
2. 手动修改DOM的方式不符合Quill的状态管理逻辑，易导致显示与实际格式不同步
3. 自定义SizeAttributor的注册时机可能滞后，导致工具栏初始化未识别自定义字号选项

修复步骤 #

1. 提前注册自定义字号属性 #

将Quill的自定义配置移到组件导入前，确保Quill实例创建时已加载自定义规则：

import Quill from 'quill';
// 先注册自定义字号样式属性
let SizeStyle = Quill.import('attributors/style/size');
SizeStyle.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px', '24px', '30px', '32px','36px','48px','60px','72px','96px'];
Quill.register(SizeStyle, true);

// 再导入Vue-Quill组件
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

2. 替换监听事件为selection-change #

使用selection-change覆盖光标移动、选区变化等所有需要同步状态的场景，并用Quill官方API更新工具栏状态：

mounted() {
  const quill = this.$refs.myQuillEditor.quill;
  quill.on('selection-change', (range) => {
    const toolbar = quill.getModule('toolbar');
    if (!range) {
      // 编辑器失去焦点时重置显示
      toolbar.set('size', false);
      return;
    }
    // 获取当前选区/光标位置的格式
    const format = range.length === 0 
      ? quill.getFormat(range.index) 
      : quill.getFormat(range);
    // 更新字号选择器状态
    toolbar.set('size', format.size || false);
  });
}

3. 确保工具栏配置与白名单完全一致 #

检查工具栏的size选项，保证所有值与SizeStyle.whitelist完全匹配，避免拼写或格式错误：

data() {
  return {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      [{ 'background': [] }, { 'color': [] }],
      [{ 'font': [] }],
      [{ 'script': 'sub' }, { 'script': 'super' }],
      [{ 'indent': '-1' }, { 'indent': '+1' }],
      [{ 'direction': 'rtl' }],
      [{ 
        'size': [false, '10px', '12px', '14px', '16px', '18px', '20px', '24px', '30px','32px','36px','48px','60px','72px','96px'] 
      }],
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'align': [] }],
      ['clean'],
      ['link', 'image', 'video']    
    ]
  }
}

额外提示 #

• 使用toolbar.set('size', value)是Quill官方推荐的状态更新方式，比手动修改DOM更稳定
• 若问题仍存在，可在控制台执行Quill.find('attributors/style/size')，确认自定义属性是否成功注册

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