原生 execCommand('undo')/('redo') 已废弃且不可靠，Chrome 90+/Firefox 88+ 完全移除，Safari 存在重绘问题；UndoManager 未被任何浏览器实现；唯一可行方案是手动记录操作意图与执行前状态。
浏览器原生的 document.execCommand('undo') 和 document.execCommand('redo') 已废弃，且行为不可靠——别指望靠它做稳定撤销/恢复。
为什么 execCommand 的 undo/redo 不能用
Chrome 从 90+、Firefox 从 88+ 起已完全移除对 execCommand('undo') 和 execCommand('redo') 的支持；即使旧版本能触发，其栈管理不透明、无法监听、不兼容 contenteditable 中的格式操作（比如加粗后删光标再 undo，常丢内容）。更关键的是：它不区分用户输入与脚本修改，也无法控制步长或合并连续输入。
- 调用
document.execCommand('undo')返回false或直接报错TypeError: document.execCommand is not a function - 即使没报错，
canUndo/canRedo属性始终为false，无法判断状态 - 在 Safari 中对
contenteditable元素调用可能触发整个页面重绘，导致光标丢失
用 UndoManager + document.registerElement 替代？不行，得自己实现
UndoManager 是 WHATWG 提出的规范草案，但至今没有浏览器实现（截至 2024 年 Chrome/Firefox/Safari 均不支持 document.undoManager）。所谓“注册自定义元素接管 undo”是早期社区误读——document.registerElement 本身也已被废弃。真实可行路径只有一条：手动记录变更快照或操作指令。
- 轻量场景（如单行输入框）：监听
input事件 +debounce保存value快照，每次 undo 取上一个value - 富文本编辑器（如
contenteditable）：必须捕获keydown（过滤Enter、Backspace、Delete）、input（含粘贴）、以及命令触发（document.execCommand('bold')等）——统一转为可逆操作对象 - 避免全量 DOM 序列化：快照用
range.toString()+getSelection().getRangeAt(0)定位，而非innerHTML，否则性能崩盘
最小可用撤销栈实现（含光标位置保持）
核心不是存 DOM，而是存「操作意图」+「执行前状态」。下面这段代码适用于 contenteditable 元素，能正确处理退格、输入、粘贴和格式切换：
立即学习“前端免费学习笔记（深入）”；
class SimpleUndoStack {
constructor(el) {
this.el = el;
this.stack = [];
this.index = -1;
this.save(); // 初始快照
el.addEventListener('input', () => this.onInput());
el.addEventListener('keydown', e => {
if ([46, 8].includes(e.keyCode)) this.save(); // Delete / Backspace
});
}
save() {
const html = this.el.innerHTML;
const selection = window.getSelection();
let rangeData = null;
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
rangeData = {
start: range.startOffset,
end: range.endOffset,
startContainer: range.startContainer,
endContainer: range.endContainer
};
}
this.stack.splice(this.index + 1);
this.stack.push({ html, rangeData });
this.index++;
}
undo() {
if (this.index <= 0) return;
this.index--;
this.restore(this.stack[this.index]);
}
restore({ html, rangeData }) {
this.el.innerHTML = html;
if (rangeData && rangeData.startContainer) {
const range = document.createRange();
range.setStart(rangeData.startContainer, rangeData.start);
range.setEnd(rangeData.endContainer, rangeData.end);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}
}
- 每次
save()前先splice掉未来步骤，保证 redo 逻辑自然成立 - 不直接存
Range对象（会失效），只存偏移量和容器引用；恢复时重新构造Range - 粘贴操作由
input事件兜底捕获，无需单独监听paste——因为paste后光标位置不稳定，而input触发时 DOM 已更新
真正麻烦的从来不是“怎么存”，而是“什么算一步”。比如连续快速输入 5 个字母，默认应合并为一次 undo 步骤；但用户按了 Ctrl+Z 又立刻输入，就得断开。这个边界得结合时间间隔（如 300ms）和事件类型来判，没有银弹——得根据你的编辑器交互节奏调。
