富文本编辑器撤销恢复必须手动维护操作栈，禁用已废弃的document.execcommand；需捕获意图而非快照dom，保存光标选区、焦点状态及可逆命令对象，防抖存档并限制栈长。
富文本编辑器的撤销恢复不能靠 document.execCommand，它已废弃且在 Chrome 90+、Firefox 80+ 中直接报 TypeError: document.execCommand is not a function；真实可用的方案必须手动维护操作栈，核心是「捕获意图」而非「快照 DOM」。
contenteditable 元素里按 Ctrl+Z 没反应？先检查是否破坏了原生栈
浏览器对 contenteditable 元素有隐式撤销支持，但极其脆弱：
- 只要执行过
element.innerHTML = ...或element.textContent = ...，原生栈立即清空 - 在
input或keydown里异步修改（比如防抖格式化），会导致撤销点错位，Ctrl+Z 可能回退到光标乱跳或样式丢失的状态 - Safari 对该隐式栈支持最差，常丢步；Chrome 合并连续输入，Firefox 更敏感——别指望跨浏览器行为一致
- 如果你监听了
beforeinput并调用了event.preventDefault()，原生撤销链也断了
用命令模式实现 undo/redo，而不是存 innerHTML
存整个 innerHTML 看似简单，但会丢失事件监听器、焦点状态、input 光标位置，且内存暴涨。生产环境应封装可逆操作对象：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 每个命令含
execute()和undo()方法，例如插入文字：{ type: 'insert', node: editor, offset: 12, text: 'hello' } - 对样式操作（加粗/列表），记录变更前后的 DOM 结构差异，而不是只记 HTML 字符串
- 避免深拷贝整个 DOM 树；用
structuredClone()要检查兼容性（Safari 16.4+ 才支持），否则手写浅层克隆 + 关键字段提取 - 中文输入法下，
input事件在 compositionend 后才触发，需监听compositionstart/compositionend防止漏存
光标和选区不恢复，用户就“找不着北”
撤销后只还原内容，不还原光标位置，等于没做完整：
- 存档时必须捕获
window.getSelection()和getRangeAt(0)，序列化为 { startContainer, startOffset, endContainer, endOffset } 等可复原字段 - 还原时用
range.setStart()、range.setEnd()重建选区，再调用selection.removeAllRanges()+selection.addRange(range) - 注意
contenteditable元素 focus 状态：还原后需显式调用editor.focus()，否则光标不显示 - 若编辑器内嵌 iframe 或 shadow DOM，选区 API 行为不同，需额外判断上下文
节流存档 + 限制栈长，否则页面卡死
高频输入（如长按字母）每毫秒触发多次 input，全量存档必然卡顿：
- 用
setTimeout防抖（推荐 300ms），等用户停顿后再存一次快照，合并中间所有输入 - 栈长度必须设上限（如
MAX_HISTORY = 50），超出后用undoStack.shift()清掉最早项 - 不要在
keydown中直接 push，它比input更频繁，且包含方向键、功能键等无关操作 -
beforeinput是更优触发点，但它不兼容旧版 Safari，需降级 fallback 到input
真正难的不是写两个栈数组，而是定义“什么算一次可撤销操作”——删一个字、输十个字、切一次加粗，粒度不一致就会导致用户预期错乱。这个边界必须结合产品场景定，不能交给通用库自动猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
