MutationObserver是动态监测富文本编辑器节点变化的唯一可靠方案——它能捕获输入、粘贴、格式操作等全部DOM变动，需同时启用childList、subtree、characterData，并建议开启attributes及oldValue选项。
要动态监测富文本编辑器（如 contenteditable 元素）的节点变化，mutationobserver 是最直接、可靠的选择——它能捕获用户输入、粘贴、格式操作等引发的 dom 变动，且不会像轮询或 input 事件那样漏掉非键盘触发的行为（比如拖拽插入图片、右键粘贴 html）。
为什么富文本编辑器必须用 MutationObserver？
富文本编辑器的内容变更方式复杂：文字输入可能新增 Text 节点，粘贴可能插入 <img> 或嵌套 <span>，撤销重做会批量替换子树。仅靠 input、keyup 或 DOMSubtreeModified（已废弃）无法覆盖全部场景。MutationObserver 天然支持异步批处理、子树递归、节点级粒度，是唯一能稳定响应所有变更类型的原生方案。
关键配置：三项必须同时开启
只设 childList: true 会漏掉属性修改（如加粗后 style="font-weight: bold"）；只设 attributes: true 会漏掉新增段落。富文本需组合监听：
-
childList: true —— 捕获新增/删除节点（如用户回车生成新
<p>、粘贴时插入<div>） -
subtree: true —— 确保深层嵌套内容也被观察（例如
<div contenteditable><p><strong>text</strong></p></div>中的<strong>内容变化） - characterData: true —— 监听已有文本节点内容修改（如双击编辑一段文字）
补充建议开启：attributes: true（监控 class/style 变化）、attributeOldValue: true 和 characterDataOldValue: true（便于对比前后状态，做差异高亮或防重复处理）。
实操要点：避开常见陷阱
富文本环境特殊，以下细节决定监听是否生效：
-
目标节点选对层级：观察
contenteditable容器本身（如div#editor），不要只观察其子元素——用户光标可能落在任意深度节点，subtree 必须从根容器开启 -
初始化前先快照：调用
observe()前，手动读取当前innerHTML或textContent作为初始值，避免把首次渲染误判为变更 -
过滤无关 mutation：回调中检查
mutation.target是否属于编辑器内部节点（可用target.closest('[contenteditable]')判断），排除第三方脚本或框架注入的干扰节点 -
避免高频误触发：某些编辑器（如 Quill、TinyMCE）内部频繁操作 DOM，可加简单节流（如
setTimeout延迟合并处理）或比对mutation.addedNodes.length是否为 0 来跳过空变更
典型使用示例
以下代码监听一个 contenteditable 区域，当内容变化时输出变更类型和节点信息：
const editor = document.getElementById('editor');
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'childList') {
console.log('节点增删', mutation.addedNodes, mutation.removedNodes);
} else if (mutation.type === 'attributes') {
console.log(`属性 ${mutation.attributeName} 变更`,
mutation.oldValue, '→', mutation.target.getAttribute(mutation.attributeName));
} else if (mutation.type === 'characterData') {
console.log('文本内容变更', mutation.oldValue, '→', mutation.target.nodeValue);
}
});
});
observer.observe(editor, {
childList: true,
subtree: true,
characterData: true,
attributes: true,
attributeOldValue: true,
characterDataOldValue: true
});
