有比 document.execCommand 更好的东西吗？

Question

在实现基于 Web 的富文本编辑器时，我了解到document.execCommand可用于对 HTML 文档执行操作（例如将选择设为粗体）。 但是，我需要更好的东西。 具体来说，我需要确切地知道在 innerHTML 中添加或删除了哪些文本，以及在什么位置（作为整个文档的 HTML 表示的偏移量）。

我考虑过在 DOM4 的变异观察器旁边使用内置的 document.execCommand，但 execCommand 似乎不能胜任这项任务：

• 我没有看到“取消粗体”选择的方法
• 生成的 html 似乎因浏览器而异。 （我想要<span>标签而不是<b>，但一致性更重要）
• 并且没有关于它如何处理冗余嵌套/相邻 <span> 标签的信息。

此外，根据我的需要，使用突变观察器似乎有点矫枉过正。

我的动机：我试图定期将文档更改传输到服务器，而无需重新传输整个文档。 我将数据作为 HTML 表示的插入和删除的集合发送。 如果有人知道从 CKEditor 中获取此功能的方法（所以我不必从头开始），那么我会永远爱你。

注意：执行文本差异不是一种选择，因为它在非常大的文档上性能很差。

否则，我并不完全害怕尝试写一些这样做的东西。 DOM 的 range 对象提供的方法可以处理很多繁重的工作。 我也很感激有关这种可能性的建议。

Answer 1

使用 execCommand 有一种替代方法 - 实现编辑器的整个交互，包括光标的闪烁。 它已经完成了。 谷歌在文档中这样做，但也有一些免费和开源的东西。 Cloud9 IDE http://c9.io有一个实现。 AFAIK，github 使用该编辑器已有一段时间了。 并且您肯定可以在此之下做任何事情，因为不涉及本机代码 - 就像在 execCommand 中一样

repo 在这里： https : //github.com/ajaxorg/cloud9 （它包含整个 IDE，您需要找到编辑器的代码。）

此外 - 不推荐使用 dom 突变事件。 如果您可以放弃对旧浏览器的支持，请尝试突变观察者。 如果没有 - 尽量避免检测 DOM 更改并拦截编辑器实现中的更改。 这也可能是适用于新浏览器的方法。

Answer 2

有Trix富文本编辑器，从他们的描述来看，避免不一致的 execCommand 是项目的重点。

Answer 3

新标准似乎是Input Events Level 2 。 在我看来，它将是 execCommand 的修订改进版。