可以在 contenteditable div 中使用浏览器的撤消来撤消“range.insertNode”吗？答案

【问题标题】：Can a `range.insertNode` be undone using browser's undo, in a contenteditable div?可以在 contenteditable div 中使用浏览器的撤消来撤消“range.insertNode”吗？
【发布时间】：2012-01-22 12:23:13
【问题描述】：

我正在使用contenteditable div 来制作一个简单的 RichText 编辑器。我的要求之一是能够在按钮事件的光标位置插入 html 块。

通过基于浏览器使用range、selection、range.insertNode(nodeHTML) 或range.pasteHTML(nodeHTML)，我能够使该部分正常工作。但我无法得到两件事，理想情况下我想要拥有

能够使用浏览器的撤消撤消插入的节点。不知何故，浏览器忽略了上述操作。
将光标移动到插入节点的末尾。这样用户就可以开始写了

我知道我可以使用许多可用的编辑器中的一些东西，它做得很好，但如果我得到这个，我就不必这样做了。欢迎任何帮助甚至建议。

谢谢。

【问题讨论】：

这可能对你有帮助：code.google.com/p/rangy - 另外，看看演示。
不幸的是，Rangy 没有撤消功能。

标签： javascript contenteditable undo rich-text-editor

【解决方案1】：

2013 年 8 月改写答案

很遗憾没有，尽管情况正在改善。由document.execCommand() 触发的程序化DOM 突变不会进入浏览器的内置撤消堆栈。但是，最近有两个发展：

IE 11 有新的ms-beginUndoUnit 和ms-endUndoUnit 命令
有一个 spec 正在开发中，用于 Web 开发人员可用的撤消堆栈，其中部分已在 WebKit 和 Firefox 中实现（注意：it's disabled by default in Firefox 显然也在 WebKit 中）。

在情况好转之前，您可以使用document.execCommand("InsertHTML", false, "<b>Some html</b>");，但这在 IE 中不受支持。

【讨论】：

我猜IE用户必须在没有撤消的情况下做。使用 insertHTML 是我的两个问题的解决方案。谢谢。顺便说一句，你的长腿令人印象深刻。
看来微软可能是第一个解决这个问题的人； IE 11 有命令 ms-beginUndoUnit 和 ms-endUndoUnit 收集使用两者之间发生的任何 DOM 更改，并将它们作为单个撤消步骤推送到撤消堆栈。
@AndyE：哦，我不知道。好消息，虽然我宁愿他们实施规范。
@AndyE：我重写了我的答案以反映当前情况。感谢您的信息。
@TimDown：没问题。我更希望他们也实现 UndoManager 规范，但也许他们出于某种原因反对它。我目前没有时间重新启动到 Windows，但我可以想象一个用例，您希望在绘制之前透明地操纵用户输入。使用 IE 实现，您需要先撤消（这将触发事件）以覆盖用户输入创建的撤消步骤。不过，我不知道 Firefox 有 UndoManager 的实现。这很酷。