javascript - `range.insertNode` 可以使用浏览器的撤消，在一个 contenteditable div 中撤消吗？

Question

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

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

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

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

谢谢。

Answer 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 中不受支持。