实现富文本编辑器撤销重做功能需基于contenteditable，通过监听input、keydown等事件捕获用户操作，结合MutationObserver判断内容变更，利用undoStack和redoStack管理状态快照，每个快照包含innerHTML与选区路径信息，采用节流合并连续输入以优化性能，执行撤销重做时还原内容与光标位置，并处理中文输入、复杂节点及内存限制等边界情况，确保操作粒度合理且体验流畅。
实现一个支持撤销重做功能的富文本编辑器，核心在于记录用户操作的历史状态，并在需要时恢复到某个历史版本。由于富文本内容结构复杂（HTML + 样式 + 光标位置），不能简单地监听输入事件，而是要结合 DOM 变化、选区管理和状态快照来设计。
1. 使用 contenteditable 基础结构
大多数富文本编辑器基于 contenteditable="true" 的元素构建。浏览器会自动处理基本的输入行为，但不会提供撤销栈。你可以在此基础上封装自己的控制逻辑。
示例结构：
通过监听关键事件来捕获变化：
- input：内容变更的主要触发点
- keydown：识别 Ctrl+Z / Ctrl+Y 快捷键
- beforeinput 和 compositionstart/end：处理中文输入法等复合输入
2. 设计撤销重做栈
维护两个栈：undoStack 和 redoStack，每个栈存储编辑器在某一时刻的状态快照。
每次用户操作产生可感知的内容变化时，将当前状态（HTML 内容 + 光标位置）推入 undoStack，并清空 redoStack（新操作后之前的“重做”失效）。
状态快照建议包含：
- innerHTML 或序列化后的内容结构
- 选区信息（通过 window.getSelection() 和 Range API 获取）
示例数据结构：
{
content: "Hello
",
selection: {
start: 5,
end: 5,
nodePath: [0, 0] // 节点路径定位
}
}
3. 智能记录变更（避免频繁快照）
如果每次 input 都保存一次状态，会导致栈过深且多数为连续打字的小变更。应采用节流 + 变更合并策略：
- 连续输入时，只在首次和停止输入 1–2 秒后记录一次
- 格式化操作（加粗、对齐等）立即生成新快照
- 使用 MutationObserver 监听 DOM 结构变化，判断是否真正内容变更
这样可以保证撤销粒度合理：一次“加粗”是一个动作，一段“打字”视为一个整体。
4. 执行撤销与重做
绑定快捷键：
document.addEventListener('keydown', e => {
if (e.ctrlKey && e.key === 'z') {
e.preventDefault();
undo();
}
if (e.ctrlKey && e.key === 'y') {
e.preventDefault();
redo();
}
});
undo 函数从 undoStack 弹出最近状态，还原内容和光标，并推入 redoStack；redo 则相反。
还原光标需递归查找节点路径对应的位置，使用 Range.setStart() 和 setEnd() 重建选区。
5. 处理边界情况
实际使用中要注意：
- 中文输入法过程中不触发中间状态记录
- 图片插入、表格操作等复杂节点要完整序列化
- 避免无限占用内存，设置栈最大长度（如 50 步）
- 协作编辑场景下需结合 OT 或 CRDT 算法，但本地单人编辑用栈足够
基本上就这些。关键是平衡性能与用户体验，在正确时机保存有意义的状态。如果不自己造轮子，也可以基于 Slate.js、ProseMirror 等框架开发，它们内置了强大的撤销重做机制。但理解底层原理有助于定制和调试。
