怎样实现一个支持撤销重做(Undo/Redo)功能的富文本编辑器？

实现富文本编辑器撤销重做功能需基于contenteditable，通过监听input、keydown等事件捕获用户操作，结合MutationObserver判断内容变更，利用undoStack和redoStack管理状态快照，每个快照包含innerHTML与选区路径信息，采用节流合并连续输入以优化性能，执行撤销重做时还原内容与光标位置，并处理中文输入、复杂节点及内存限制等边界情况，确保操作粒度合理且体验流畅。

实现一个支持撤销重做功能的富文本编辑器，核心在于记录用户操作的历史状态，并在需要时恢复到某个历史版本。由于富文本内容结构复杂（HTML + 样式 + 光标位置），不能简单地监听输入事件，而是要结合 DOM 变化、选区管理和状态快照来设计。

1. 使用 contenteditable 基础结构

大多数富文本编辑器基于 contenteditable="true" 的元素构建。浏览器会自动处理基本的输入行为，但不会提供撤销栈。你可以在此基础上封装自己的控制逻辑。

示例结构：

<div id="editor" contenteditable="true"></div>

通过监听关键事件来捕获变化：

• input：内容变更的主要触发点
• keydown：识别 Ctrl+Z / Ctrl+Y 快捷键
• beforeinput 和 compositionstart/end：处理中文输入法等复合输入

2. 设计撤销重做栈

维护两个栈：undoStack 和 redoStack，每个栈存储编辑器在某一时刻的状态快照。

每次用户操作产生可感知的内容变化时，将当前状态（HTML 内容 + 光标位置）推入 undoStack，并清空 redoStack（新操作后之前的“重做”失效）。

状态快照建议包含：

• innerHTML 或序列化后的内容结构
• 选区信息（通过 window.getSelection() 和 Range API 获取）

示例数据结构：

千图设计室AI海报

千图网旗下的智能海报在线设计平台

172

查看详情

{
  content: "<p>Hello</p>",
  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)功能的富文本编辑器？的详细内容，更多请关注php中文网其它相关文章！