富文本编辑器实现：命令模式与操作记录详解

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《实现一个支持撤销和重做的富文本编辑器，通常需要结合命令模式和操作记录机制。以下是实现的基本思路和步骤：一、核心概念1. 撤销（Undo）与重做（Redo）撤销：将编辑器状态恢复到上一步。重做：将编辑器状态恢复到被撤销的那一步。2. 命令模式（Command Pattern）将每个操作封装为一个对象，包含执行和撤销的方法。每个操作保存在栈中，便于撤销和重做。二、实现步骤1. 定义命令接口interface Command { execute(): void; undo(): void; }2. 创建具体命令类例如，插入文本的命令：class InsertTextCommand implements Command { private editor: Editor; private text: string; private position: number; constructor(editor: Editor, text: string, position: number) { this.editor = editor; this.text = text; this.position = position; } execute() { this.editor.insertText(this.text, this.position); } undo() { this.editor.deleteText(this.position, this.text.length); } }3. 维护命令栈使用两个栈来分别保存》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

答案：通过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 内容：

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

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

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

4. 实现 undo 和 redo 功能

定义两个方法：

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

5. 优化体验与性能

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

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

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。