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

Question

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

我考虑过使用内置的document.execCommand和DOM4的变异观察器，但是execCommand似乎没有完成任务：

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

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

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

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

否则，我并不是害怕尝试写一些这样做的东西。 DOM的范围对象提供的方法将处理很多繁重的工作。我也很欣赏有关这种可能性的建议。

Answer 1

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

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

此外 - 不推荐使用dom变异事件。如果您可以放弃对旧浏览器的支持，请尝试mutation observer。如果不是 - 尽量避免检测DOM更改并拦截编辑器实现中的更改。它也可能是新浏览器的用途。

Answer 2

新标准似乎是Input Events Level 2。对我来说，它看起来像是 execCommand 的修订改进版。

Answer 3

有Trix富文本编辑器，从它们的描述中可以看出，避免不一致的execCommand就是项目的重点。