监听 contenteditable 编辑器需设 childlist: true 和 subtree: true 才能捕获深层插入、文本变更及属性修改；必须校验节点有效性与 isconnected，避免监听 document 全局；回调中修改 dom 要节流或 takerecords() 防死循环；组件卸载时务必 disconnect() 防内存泄漏。
监听 HTML 编辑器的 contenteditable 容器结构变化必须设 childList: true 和 subtree: true
只开 childList: true 会漏掉深层插入（比如用户粘贴一段带嵌套 <div><p><span>文本</span></p></div>），因为 MutationObserver 默认只看目标节点的**直接子节点**。编辑器内容通常动态挂载在 div[contenteditable="true"] 下，而用户操作（粘贴、拖拽、格式化）常生成多层 DOM，必须加 subtree: true 才能捕获。
常见错误是监听了 document.body 或 #editor 父容器但没确认该容器已真实挂载。建议在 DOMContentLoaded 后获取节点，并加校验：
const editor = document.querySelector('[contenteditable]');
if (!editor || editor.nodeType !== 1) {
console.warn('编辑器节点无效');
return;
}
- 不要监听
document或document.body—— 编辑器外的广告、脚本插入会制造大量无关回调 - 确保
editor是已插入文档的元素，editor.isConnected应为true - 若用框架（如 Vue 的
v-html或 ReactdangerouslySetInnerHTML），需在mounted/useEffect中获取真实 DOM 再调用observe()
attributes: true 配合 attributeFilter 才能精准捕获 class/style/data-* 篡改
HTML 编辑器里，用户或插件常通过修改 class（切换高亮/块样式）、style（内联样式）、data-* （自定义语义标记）来控制渲染。但 attributes: true 单独启用会报错，它必须和 childList: true 或 characterData: true 共存——你已经开了 childList，所以没问题。
真正容易踩坑的是：不设 attributeFilter 就等于监听所有属性变更，包括编辑器自身触发的 spellcheck、aria-* 等，噪音极大。实操建议：
- 只监听业务强相关的属性：
attributeFilter: ['class', 'style', 'data-block-type', 'data-inline-id'] - 需要对比篡改前后值？必须加
attributeOldValue: true，否则mutation.oldValue是undefined - 注意：用
element.classList.add()或element.style.color = 'red'都会触发，但旧值只能从mutation.oldValue拿，新值得用target.getAttribute(attrName)读
监听文本内容变更要盯住 Text 节点，不是容器本身
用户输入纯文本、删除字符、回车换行，这些操作多数落在 Text 节点上（nodeType === 3），而非 contenteditable 容器。如果只观察容器并开启 characterData: true，但没设 subtree: true，就收不到任何文本变化——因为文本节点是容器的后代，不是直接子节点。
更关键的是：编辑器中一个 <div contenteditable> 可能包含多个 <code>Text 子节点（比如段落间有空格、换行符生成的空白文本节点）。所以必须：
- 启用
characterData: true和characterDataOldValue: true - 配合
subtree: true，让 observer 能钻到所有后代文本节点 - 在回调里过滤出
Text节点：if (node.nodeType === 3 && node.textContent.trim()) - 避免误处理注释节点（
nodeType === 8）或空文本节点（node.textContent === ''）
示例判断逻辑：
mutations.forEach(mutation => {
if (mutation.type === 'characterData' && mutation.target.nodeType === 3) {
const newText = mutation.target.nodeValue;
const oldText = mutation.oldValue || '';
if (newText !== oldText) {
console.log('文本变更:', { old: oldText, new: newText });
}
}
});
回调里修改 DOM 极易引发死循环，必须用 takeRecords() 或节流
编辑器场景下，回调里常要同步更新状态栏字数、高亮语法、校验格式。但如果直接在回调里改 editor.innerHTML 或 editor.textContent，会再次触发 MutationObserver，形成无限递归。浏览器不会自动拦截，只会卡死或抛 RangeError: Maximum call stack size exceeded。
安全做法不是“禁止修改”，而是控制节奏：
- 先调用
observer.takeRecords()清空待处理队列，避免重复触发 - 用
requestIdleCallback延迟到空闲帧再执行修复逻辑（适合非实时需求） - 高频操作（如连续输入）加简单时间节流：
if (Date.now() - lastHandleTime > 100) { ...; lastHandleTime = Date.now(); } - 修复完成后，再调用
observer.observe()恢复监听 —— 不要依赖自动重连
最常被忽略的一点：组件卸载或编辑器销毁时，必须显式调用 observer.disconnect()。否则 observer 持有对 DOM 节点的引用，导致内存泄漏 —— 尤其在 SPA 页面跳转后，监听器还在后台跑着。
