实现富文本编辑器撤销重做功能需基于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 等框架开发，它们内置了强大的撤销重做机制。但理解底层原理有助于定制和调试。
以上就是怎样实现一个支持撤销重做(Undo/Redo)功能的富文本编辑器？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525691.html
微信扫一扫 
支付宝扫一扫 
