应监听富文本外层容器的paste捕获事件，通过e.target判断可编辑区域并阻止默认行为，再手动处理剪贴板内容；iframe场景需在同源contentDocument中监听；组件销毁时须移除监听器。
在富文本编辑器中，直接为每个可编辑元素（如 contenteditable 的 div 或 iframe 内的 body）单独绑定 paste 事件既繁琐又不可靠——尤其当内容动态插入、节点频繁增删时。事件委托是更健壮的方案，但需注意：paste 事件本身不支持传统冒泡到 document 或父容器（在多数浏览器中它只在目标元素触发，且默认不冒泡）。因此“委托”需换思路：不是靠 DOM 冒泡委托，而是利用捕获阶段 + 统一监听根容器，再结合目标判断实现逻辑上的“统一拦截”。
监听 contenteditable 容器的 paste 捕获阶段
将 paste 监听器绑定在富文本最外层容器（如 div#editor）上，并启用 useCapture = true。虽然 paste 不冒泡，但它会在捕获阶段经过祖先节点——只要目标是该容器内部的可编辑子节点，就能被捕获到。
- 确保容器设为
contenteditable="true"或其子元素有该属性（否则 paste 可能不触发） - 监听代码示例：
document.getElementById('editor').addEventListener('paste', handlePaste, true); // 注意第三个参数 true - 在
handlePaste中通过e.target判断是否落在可编辑区域（例如检查target.isContentEditable或向上查找最近的contenteditable父节点）
统一处理粘贴内容（过滤/转换/阻止默认）
获取剪贴板数据后，可做标准化处理：清除多余样式、转义危险 HTML、限制图片尺寸、替换特定字符等。关键点在于调用 e.preventDefault() 阻止浏览器默认粘贴行为，再手动插入处理后的内容。
- 用
e.clipboardData?.getData('text/html')优先取 HTML；若为空，回退到'text/plain' - 创建临时 DOM 解析 HTML（如
const div = document.createElement('div'); div.innerHTML = html;），遍历清理 style、script、iframe 等 - 用
document.execCommand('insertHTML', false, cleanHtml)（旧 API）或更现代的getSelection().getRangeAt(0).insertNode(...)插入 - 对纯文本粘贴，可先转义再包裹为
<p>...</p>再插入
兼容 iframe 内编辑场景（如 TinyMCE / CKEditor 底层）
若富文本基于 iframe（如传统模式），paste 事件发生在 iframe 的 contentDocument 中，无法被外层 document 直接捕获。此时需在 iframe 加载完成后，向其 contentDocument 的 body 或 document 添加监听：
立即学习“Java免费学习笔记（深入）”；
- 监听 iframe 的
load事件，再执行：iframe.contentDocument.addEventListener('paste', handlePaste, true); - 注意跨域限制：仅同源 iframe 才能访问其
contentDocument - 若使用现代编辑器 SDK（如 Quill、Tiptap），优先查阅其插件机制（如 Quill 的
clipboard模块），避免绕过框架直接操作原生事件
避免重复绑定与内存泄漏
富文本组件可能销毁重建（如 Vue/React 中切换 tab），需确保事件监听器能被正确移除。
- 保存监听函数引用（不要用匿名函数），便于后续
removeEventListener - 在组件卸载/销毁时清理：
editorEl.removeEventListener('paste', handlePaste, true); - 若使用 iframe，还需在 iframe 移除前清理其内部监听器（可通过
iframe.contentWindow?.removeEventListener）
