实现一个支持撤销和重做的富文本编辑器，主要依赖于操作记录和状态管理。以下是关键步骤和实现思路：一、核心原理：操作记录与状态快照撤销（Undo）：将当前状态回退到上一步。重做（Redo）：将当前状态恢复到被撤销的那一步。为此，我们需要维护两个栈（或队列）：undoStack：保存可撤销的操作。redoStack：保存可重做的操作。二、实现步骤1. 监听用户输入通过监听用户的操作事件（如键盘输入、粘贴

本文深入探讨了如何从零构建一个稳定可靠的富文本编辑器撤销重做功能，摒弃已废弃且不可控的 document.execCommand，转而基于 contenteditable 元素，通过手动捕获和管理 DOM 状态快照——利用防抖监听 input/mouseup 等事件、精准比较内容变化、维护双栈（undoStack 与 redoStack）结构、限制历史步数并兼顾光标恢复等细节优化，实现完全可控、跨平台兼容、轻量实用的状态回溯能力，为开发者提供了一套清晰、可落地、易扩展的核心实现范式。

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

1. 使用 contenteditable 基础结构

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

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

2. 设计命令栈管理机制

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

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

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

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

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

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

4. 实现 undo 和 redo 功能

定义两个方法：

注意：undo 保留至少一个状态，防止栈空。每次撤销把当前状态推入重做栈。

5. 优化体验与性能

• 只在内容真正变化时保存：比较 innerHTML 是否不同
• 限制历史步数：如最多保存 50 步，防止内存占用过高
• 处理光标位置：高级场景下还需保存 selection 范围，恢复时还原光标
• 合并连续输入：短时间内连续输入视为一次操作

基本上就这些。关键是不依赖浏览器默认行为，自己掌控状态快照。虽然 innerHTML 存储不够高效，但对于中小型编辑器足够实用。如果追求极致，可改用差分算法或操作变换（OT），但复杂度会显著上升。

好了，本文到此结束，带大家了解了《实现一个支持撤销和重做的富文本编辑器，主要依赖于操作记录和状态管理。以下是关键步骤和实现思路：一、核心原理：操作记录与状态快照撤销（Undo）：将当前状态回退到上一步。重做（Redo）：将当前状态恢复到被撤销的那一步。为此，我们需要维护两个栈（或队列）：undoStack：保存可撤销的操作。redoStack：保存可重做的操作。二、实现步骤1. 监听用户输入通过监听用户的操作事件（如键盘输入、粘贴、格式更改等），捕获每次变化，并将其封装成一个“操作对象”。const editor = document.getElementById('editor'); editor.addEventListener('input', () => { const content = editor.innerHTML; // 捕获内容变化并添加到 undo 栈 });2. 封装操作对象每个操作应包含以下信息：原始内容（操作前的状态）新内容（操作后的状态）操作类型（如插入、删除、格式修改等）function createOperation(oldContent, newContent, type) { return { oldContent, newContent, type }; }3. 维护》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！