如何设计一个支持撤销、重做和历史记录的富文本编辑器核心？-js教程-PHP中文网

如何设计一个支持撤销、重做和历史记录的富文本编辑器核心？

夢幻星辰

发布： 2025-09-30 08:35:02

原创

236人浏览过

答案是采用命令模式管理编辑操作，通过封装执行与撤销方法、维护撤销重做栈、合并连续输入及可选快照优化，实现高效富文本编辑器状态控制。

如何设计一个支持撤销、重做和历史记录的富文本编辑器核心？

实现一个支持撤销、重做和历史记录的富文本编辑器核心，关键在于状态管理与操作抽象。不能依赖 DOM 快照，因为性能差且不可控。正确做法是将用户操作建模为可逆的动作对象，并通过命令模式统一管理。

1. 使用命令模式封装编辑操作

每个用户编辑行为（如插入文字、删除、格式化）都应封装为一个命令对象，包含执行和撤销方法。

• 每个命令实现 execute() 和 undo() 方法
• 命令需携带足够的上下文信息，如光标位置、选中内容、格式类型等
• 所有用户触发的编辑必须通过命令调度器执行，不能直接修改编辑器状态
• 示例：加粗命令在执行时给选中文本添加 <strong> 标签，撤销时移除标签并恢复原始结构

2. 构建撤销/重做栈

维护两个栈：一个存放已执行的操作（undoStack），另一个存放被撤销的操作（redoStack）。

• 用户操作后，命令推入 undoStack，清空 redoStack
• 撤销时，从 undoStack 弹出命令执行 undo()，并推入 redoStack
• 重做时，从 redoStack 弹出命令执行 execute()，再推回 undoStack
• 设置栈深度限制（如 50 步），避免内存泄漏