MutationObserver 配合 characterData: true 是目前唯一能稳定捕获编辑器内纯文本细粒度变化的原生方案，但必须同时设 subtree: true 和 characterData: true，否则无法监听嵌套 Text 节点的内容修改；若支持富文本还需 childList: true 捕获新增节点。
MutationObserver 配合 characterData: true 是目前唯一能稳定捕获编辑器内纯文本细粒度变化（比如单字符增删、光标处插入）的原生方案。其他方式如 input 事件在 contenteditable 中行为不一致，DOMCharacterDataModified 已被废弃，硬写等于没写。
为什么必须同时设 subtree: true 和 characterData: true
编辑器（如 div[contenteditable]）的文本通常不在顶层节点，而是分散在多个嵌套的 Text 节点中——比如加粗文字可能被包裹在 <strong></strong> 内，其子节点才是真实文本节点。只设 characterData: true 但没开 subtree: true，就只能监听目标元素自身文本（往往为空），子节点里的修改完全收不到。
常见错误现象：observer.observe(editorEl, { characterData: true }) 后，用户在编辑器里打字，回调一动不动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终启用
subtree: true，哪怕你认为结构简单 - 如果编辑器支持富文本（含
<em>、<p>等），必须额外加childList: true，因为粘贴或格式化操作常会新增/替换整个文本节点，而非修改旧节点 - 不要监听
document.body或父级容器，精确到编辑器根元素即可，避免性能抖动
characterData 类型回调里怎么拿到“变了什么”
MutationRecord 的 type === 'characterData' 时，真正变化的是 mutation.target 这个 Text 节点的内容，不是父元素的 textContent。直接读 mutation.target.textContent 最准，它反映该节点当前值；而 mutation.oldValue 是变更前的快照（仅当配置了 characterDataOldValue: true 才有）。
注意：这个 target 是 Text 节点，不是你传入的 editorEl。所以别写 editorEl.textContent 去比对——它会聚合所有子文本，掩盖局部修改细节。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 配置 observer 时加上
characterDataOldValue: true，否则拿不到oldValue - 若需定位到具体位置（如光标偏移），得结合
getSelection()+Range计算，MutationObserver本身不提供坐标信息 - 避免在回调里直接改
mutation.target，否则可能触发新一轮 mutation，造成无限循环
初始化时如何不漏掉首次渲染的文本
MutationObserver 不追溯历史，只报告 observe 启动后的变更。如果编辑器已预填内容（比如服务端直出或 JS 初始化赋值），这些初始文本不会触发任何回调。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 创建 observer 后，立即调用
observer.takeRecords()清空可能存在的积压（虽通常为空） - 手动读取编辑器根元素的
textContent作为初始值，存进变量，后续靠它和回调中的新值做 diff - 更稳妥的做法：先用
childList: true捕获所有初始Text节点，再对每个节点单独调用observe(node, { characterData: true })，这样连动态插入的空白文本节点都能覆盖
兼容 IE11 或需要降级时怎么处理
IE11 完全不支持 MutationObserver，且没有等效替代 API。轮询是唯一可行路径，但必须控制节奏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
setInterval每 120ms 读一次editorEl.textContent，间隔低于 100ms 易导致主线程卡顿 - 每次读取后与上一次缓存值用
===比较，避免无谓的字符串 diff - 在编辑器获得焦点时启动轮询，失焦时暂停，减少空转
- 如果项目已用 Vue/React，优先走框架自身的响应式机制（如
watch或useEffect），而非 DOM 层轮询
真正难的不是监听本身，而是区分“用户输入”和“框架自动更新”——比如 Vue 重渲染可能批量替换节点，此时 characterData 不会触发，得靠 childList + 节点比对。这类边界场景没有银弹，得根据编辑器实际 DOM 行为定制判断逻辑。
