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

Question

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

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

• 我没有看到一种"不加粗体"选择的方法
• 生成的html似乎因浏览器而异.(我希望<span>标签不是<b>,但一致性更重要)
• 并且没有关于它如何处理冗余嵌套/相邻<span>标签的信息.

此外,根据我的需要,使用变异观察器似乎有点矫枉过正.

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

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

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

Answer 1

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

repo在这里:https://github.com/ajaxorg/cloud9(它包含整个IDE,你需要找到编辑器的代码.)

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

Answer 2

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