富文本内容粘贴格式处理、HTML 转义问题

记录在使用富文本编辑器时遇到的粘贴内容格式混乱、HTML 被转义等问题及处理方法。

---

一、问题现象

• 从 Word、网页等处粘贴内容，样式混乱或带有大量无用标签
• HTML 内容被转义，显示为 <div> 而不是渲染后的标签
• 粘贴后图片、表格错位

---

二、常见原因

1. 编辑器默认保留原始样式
   大量内联 CSS、字体标签会直接进入编辑器内容。

2. HTML 自动转义
   某些编辑器或框架出于安全考虑会将 HTML 转为实体字符。

3. 未开启粘贴过滤功能
   部分富文本库需要手动配置过滤规则。

---

三、解决方案

1. 启用粘贴过滤

以 Quill 为例：

quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
  delta.ops = delta.ops.map(op => {
    if (op.insert && typeof op.insert === 'string') {
      op.insert = op.insert.replace(/\n{3,}/g, '\n\n') // 清理多余空行
    }
    return op
  })
  return delta
})

WangEditor 示例：

editor.config.pasteFilterStyle = false // 禁用样式过滤
editor.config.pasteTextHandle = (pasteStr) => {
  return pasteStr.replace(/style="[^"]*"/g, '') // 自定义去样式
}

---

2. 处理 HTML 转义

Vue 模板中可使用 v-html 渲染：

<div v-html="content"></div>

注意：v-html 会有 XSS 风险，建议在渲染前进行 HTML 清理（如使用 DOMPurify）。

---

3. 使用 DOMPurify 清理 HTML

import DOMPurify from 'dompurify'
const safeHtml = DOMPurify.sanitize(rawHtml)

---

四、调试建议

• 粘贴后立即在控制台输出内容，确认是否已转义
• 检查编辑器配置是否有 pasteFilterStyle、pasteTextHandle 等选项
• 对接收方（后端存储）做 HTML 清洗，防止存储恶意脚本

---

五、小结

粘贴格式与 HTML 转义问题的核心在于过滤与安全处理，需要在编辑器配置和数据渲染两端同时处理。