Quill富文本编辑器V2.0粘贴Word内容丢失字号问题求助

Quill默认的粘贴处理会过滤掉Word带过来的不少样式，包括字号，要解决这个问题可以从以下两个方向操作：

1. 显式配置允许的格式 #

创建Quill实例时，必须把size（对应字号）加入formats列表，否则Quill会直接忽略字号相关样式：

const quill = new Quill('#editor', {
  theme: 'snow',
  formats: [
    'bold', 'italic', 'underline', 'strike',
    'font', 'size',  // 必须包含该项才能支持字号格式
    'color', 'background',
    'list', 'bullet', 'indent',
    'link', 'image'
  ]
});

2. 自定义粘贴解析逻辑 #

Word粘贴的HTML里，字号通常嵌套在<span>或<p>的style属性中，Quill默认不会解析这类内嵌样式，需要通过Clipboard模块的匹配器手动提取并应用：

// 注册粘贴匹配器，处理DOM节点
quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
  // 处理span标签内的字号样式
  if (node.tagName === 'SPAN') {
    const fontSize = node.style.fontSize;
    if (fontSize) {
      // Quill支持pt、px等单位，可根据需求转换或直接保留
      const sizeValue = fontSize;
      delta.ops.forEach(op => {
        if (op.insert) {
          op.attributes = op.attributes || {};
          op.attributes.size = sizeValue;
        }
      });
    }
  }
  // 处理p标签的默认字号
  if (node.tagName === 'P') {
    const fontSize = node.style.fontSize;
    if (fontSize && delta.ops.length > 0) {
      const sizeValue = fontSize;
      delta.ops[0].attributes = delta.ops[0].attributes || {};
      delta.ops[0].attributes.size = sizeValue;
    }
  }
  return delta;
});

额外注意 #

• 如果需要保留更多Word格式（比如字体、行高），可以在匹配器里扩展处理对应的style属性，比如fontFamily、lineHeight
• 不同版本Word生成的HTML结构可能有差异，可通过console.log(node)查看粘贴的DOM节点结构，针对性调整逻辑

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