答案：通过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 执行，防止打字过程中每敲一个字母都存一次。
4. 实现 undo 和 redo 功能
定义两个方法：
function undo() {
if (undoStack.length > 1) {
const state = undoStack.shift();
redoStack.unshift(state);
editor.innerHTML = undoStack[0];
}
}
function redo() {
if (redoStack.length > 0) {
const state = redoStack.shift();
undoStack.unshift(state);
editor.innerHTML = state;
}
}
注意：undo 保留至少一个状态，防止栈空。每次撤销把当前状态推入重做栈。
5. 优化体验与性能
只在内容真正变化时保存：比较 innerHTML 是否不同 限制历史步数：如最多保存 50 步，防止内存占用过高 处理光标位置：高级场景下还需保存 selection 范围，恢复时还原光标 合并连续输入：短时间内连续输入视为一次操作
基本上就这些。关键是不依赖浏览器默认行为，自己掌控状态快照。虽然 innerHTML 存储不够高效，但对于中小型编辑器足够实用。如果追求极致，可改用差分算法或操作变换（OT），但复杂度会显著上升。
以上就是如何实现一个支持撤销和重做的富文本编辑器？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525436.html
微信扫一扫 
支付宝扫一扫 
