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

富文本编辑器撤销重做实现方法详解

2025-10-08 18:09:37 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

想要打造一款支持撤销和重做的富文本编辑器？核心在于精细地记录用户操作历史，并具备回溯和恢复这些操作的能力。本文深入探讨了如何利用 `contenteditable` 属性，结合自定义命令栈，来实现这一目标。通过 `contenteditable` 将 `div` 元素转化为可编辑区域，并维护 `undoStack` 和 `redoStack` 两个栈来保存操作历史记录。文章详细介绍了监听 `input`、`mouseup` 等事件，并采用防抖技术来优化状态保存的策略。同时，也阐述了 `undo` 和 `redo` 方法的具体实现，以及如何通过限制步数、比较内容变化、合并连续输入等手段来提升用户体验和性能。掌握这些技巧，你也能构建出稳定可靠的富文本编辑器撤销重做功能。

答案：通过contenteditable结合自定义命令栈实现富文本编辑器的撤销重做功能。1. 使用contenteditable使div可编辑；2. 维护undoStack和redoStack两个栈保存操作历史；3. 监听input、mouseup等事件并防抖保存状态；4. 实现undo/redo方法，切换历史状态；5. 优化包括限制步数、比较内容变化、合并连续输入及光标位置处理。核心是手动管理DOM快照而非依赖浏览器默认行为。

如何实现一个支持撤销和重做的富文本编辑器？

实现一个支持撤销和重做的富文本编辑器，核心在于记录用户操作的历史状态，并在需要时恢复到某个历史版本。现代浏览器提供了 document.execCommand（已废弃但仍可用）或更推荐的 Content Editable + Selection & Range API 来操作富文本内容，结合自定义命令栈管理，可以稳定实现撤销重做功能。

1. 使用 contenteditable 基础结构

将一个元素设置为可编辑：

这个 div 就成为一个富文本编辑区域，用户可以加粗、换行、插入图片等。但原生不提供撤销重做管理，需自行实现。

2. 设计命令栈管理机制

不要依赖浏览器自带的 document.execCommand('undo')，它行为不可控且不利于跨平台。应手动保存每次变更前的内容快照，并维护两个栈：

undoStack：保存可撤销的操作（从新到旧）
redoStack：保存可重做的操作（撤销后放入这里）

每次用户输入或格式化操作前，先保存当前 HTML 内容：

function saveState() {
  // 只在内容变化时保存
  if (undoStack.length === 0 || undoStack[0] !== editor.innerHTML) {
    undoStack.unshift(editor.innerHTML);
    // 超出最大步数则截断
    if (undoStack.length > MAX_STEPS) undoStack.pop();
    // 清空重做栈
    redoStack = [];
  }
}

3. 监听内容变化并触发保存

通过监听 keyup、input、mouseup 等事件判断是否需要保存状态：

editor.addEventListener('input', () => {
debouncedSave(); // 防抖，避免频繁输入时过多保存
});

editor.addEventListener('mouseup', () => {
saveState(); // 鼠标选择可能改变格式
});

使用防抖函数控制 saveState 的调用频率，比如延迟 500ms 执行，防止打字过程中每敲一个字母都存一次。