HTML撤销导致恢复操作怎么办_HTML撤销优化恢复操作方法【须知】-html教程-PHP中文网

原生 execcommand('undo')/('redo') 已废弃且不可靠，chrome 90+/firefox 88+ 完全移除，safari 存在重绘问题；undomanager 未被任何浏览器实现；唯一可行方案是手动记录操作意图与执行前状态。

html撤销导致恢复操作怎么办_html撤销优化恢复操作方法【须知】

浏览器原生的 document.execCommand('undo') 和 document.execCommand('redo') 已废弃，且行为不可靠——别指望靠它做稳定撤销/恢复。

为什么 `execCommand` 的 undo/redo 不能用

Chrome 从 90+、Firefox 从 88+ 起已完全移除对 execCommand('undo') 和 execCommand('redo') 的支持；即使旧版本能触发，其栈管理不透明、无法监听、不兼容 contenteditable 中的格式操作（比如加粗后删光标再 undo，常丢内容）。更关键的是：它不区分用户输入与脚本修改，也无法控制步长或合并连续输入。

调用 document.execCommand('undo') 返回 false 或直接报错 TypeError: document.execCommand is not a function
即使没报错，canUndo/canRedo 属性始终为 false，无法判断状态
在 Safari 中对 contenteditable 元素调用可能触发整个页面重绘，导致光标丢失

用 `UndoManager` + `document.registerElement` 替代？不行，得自己实现

UndoManager 是 WHATWG 提出的规范草案，但至今没有浏览器实现（截至 2024 年 Chrome/Firefox/Safari 均不支持 document.undoManager）。所谓“注册自定义元素接管 undo”是早期社区误读——document.registerElement 本身也已被废弃。真实可行路径只有一条：手动记录变更快照或操作指令。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

轻量场景（如单行输入框）：监听 input 事件 + debounce 保存 value 快照，每次 undo 取上一个 value
富文本编辑器（如 contenteditable）：必须捕获 keydown（过滤 Enter、Backspace、Delete）、input（含粘贴）、以及命令触发（document.execCommand('bold') 等）——统一转为可逆操作对象
避免全量 DOM 序列化：快照用 range.toString() + getSelection().getRangeAt(0) 定位，而非 innerHTML，否则性能崩盘

最小可用撤销栈实现（含光标位置保持）

核心不是存 DOM，而是存「操作意图」+「执行前状态」。下面这段代码适用于 contenteditable 元素，能正确处理退格、输入、粘贴和格式切换：

class SimpleUndoStack {
  constructor(el) {
    this.el = el;
    this.stack = [];
    this.index = -1;
    this.save(); // 初始快照
    el.addEventListener('input', () => this.onInput());
    el.addEventListener('keydown', e => {
      if ([46, 8].includes(e.keyCode)) this.save(); // Delete / Backspace
    });
  }
  save() {
    const html = this.el.innerHTML;
    const selection = window.getSelection();
    let rangeData = null;
    if (selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      rangeData = {
        start: range.startOffset,
        end: range.endOffset,
        startContainer: range.startContainer,
        endContainer: range.endContainer
      };
    }
    this.stack.splice(this.index + 1);
    this.stack.push({ html, rangeData });
    this.index++;
  }
  undo() {
    if (this.index