paste事件拦截比事后清洗更可靠，因可阻止含xss风险的html直接插入dom，避免触发脚本、破坏状态或渲染异常；须preventdefault后手动解析clipboarddata，用domparser安全处理，并用range api精准插入保光标。
为什么 paste 事件拦截比事后清洗更可靠
因为浏览器默认粘贴行为会把 Word、微信或网页复制的 HTML 直接插入 contenteditable 区域，而这些 HTML 常含嵌套 span、内联 style、font 标签、零宽字符（\u200b）甚至 onerror 属性。等它进 DOM 再用正则或 innerHTML 清洗，已可能触发 XSS、破坏编辑器状态，或让后续解析/搜索/移动端渲染全乱套。
真正可控的做法是：在 paste 事件里立刻 event.preventDefault()，切断默认流程，再手动读取、解析、过滤、插入——这是唯一能保证结构干净、光标位置正确、且不依赖废弃 API 的路径。
如何安全读取并解析 clipboardData 中的 HTML
别直接用 clipboardData.getData('text/plain')，它在 macOS Notes、企业微信等场景下常丢换行、混入软连字符（\u00ad）、或返回空字符串；也别用 innerHTML = htmlString 解析，会执行脚本或触发 CSS 表达式。
- 优先调用
event.clipboardData?.getData('text/html')，拿到原始 HTML 字符串 - 用
new DOMParser().parseFromString(html, 'text/html')创建无执行上下文的文档 - 遍历其
body子节点，只保留白名单标签：p、h1–h6、ul/ol/li、strong/em、a、br、blockquote - 对每个
a标签，强制重写href：移除javascript:、vbscript:、data:协议，加rel="noopener noreferrer" - 删掉所有
style、class、on*属性（除非你有预设 CSS 类白名单）
兼容性陷阱与 Safari 降级方案
Safari（尤其 iOS 16.3 及更早）对 clipboardData.getData('text/html') 返回空字符串，且不支持 clipboardData.items。不能靠报错兜底，必须主动检测并 fallback。
- 先检查
event.clipboardData?.getData('text/html')?.trim()是否非空，为空则退到getData('text/plain') - 对
text/plain结果，做.replace(/\u200b/g, '').replace(/\u00ad/g, '')清零宽字符和软连字符 - 若需保留段落结构，用
DOMParser解析一个最小包裹 HTML：<div>' + plainText + '</div>，再取textContent并按\n拆分后手动插入document.createTextNode()和document.createElement('br') - 避免使用
document.execCommand('insertText')：Chrome 90+ 已废弃，且无视光标位置，文字总插到末尾
插入清洗后内容时怎么保光标、不崩排版
直接 element.innerHTML = cleanHtml 会重置整个区域，导致光标跳到开头、滚动位置丢失、甚至触发重排卡顿。要精准插入到当前光标处，必须用原生 Range API。
- 用
getSelection()?.getRangeAt(0)获取当前选区范围 - 创建
DocumentFragment，把清洗后的节点逐个appendChild进去 - 调用
range.deleteContents()清空当前选区，再用range.insertNode(fragment) - 若用户粘贴在空行或列表项中，注意补上
<br>
或维持li结构，否则编辑器内部 state（如 Quill 的ql-类）可能错位 - 插入后手动恢复光标：用
range.collapse(false)把光标移到插入内容末尾
最易被忽略的是：清洗逻辑必须区分「编辑器内部 HTML」和「最终展示 HTML」。比如 Quill 输出的 <p class="ql-align-center"></p> 是它自己的格式标记，不该被前端清洗器当成冗余 class 删掉；而用户从外部粘贴进来的 <span style="color:red"></span> 才是真该处理的脏数据。前端清洗只是第一道闸门，服务端仍需用 sanitize-html 或 Bleach 二次校验，否则任何绕过前端的行为都会直通数据库。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
