当前位置：首页 > 文章列表 > 文章 > 前端 > 富文本编辑器实现撤销重做功能详解

富文本编辑器实现撤销重做功能详解

2025-10-30 12:20:38 0浏览收藏

golang学习网今天将给大家带来《实现一个支持撤销/重做（Undo/Redo）功能的富文本编辑器，通常需要以下步骤：一、理解撤销/重做机制撤销（Undo）和重做（Redo）是常见的编辑功能，用于让用户可以回退或重新应用之前的操作。其核心思想是通过操作记录来保存用户对文档的修改，并在需要时恢复这些状态。二、设计数据结构：使用命令模式或操作栈1. 命令模式（Command Pattern）每个操作（如插入文字、删除文字、格式更改等）被封装为一个“命令”对象。命令对象包含执行和撤销的方法。使用两个栈：undoStack：保存已执行的操作，用于撤销。redoStack：保存已被撤销的操作，用于重做。2. 操作历史栈可以用数组或栈结构来存储每一步操作的状态。每次用户进行编辑操作时，将当前状态保存到 undoStack 中。撤销时从 undoStack 弹出最新状态并应用到编辑器中，同时将该状态压入 redoStack。重做时从 redoStack 弹出状态并应用，同时压入 undoStack。》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

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

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

实现一个支持撤销重做功能的富文本编辑器，核心在于记录用户操作的历史状态，并在需要时恢复到某个历史版本。由于富文本内容结构复杂（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() 重建选区。