在实现基于 Web 的富文本编辑器时，我读到 document.execCommand 对于在 HTML 文档上执行操作很有用(比如将选择加粗)。但是，我需要更好的东西。具体来说，我需要确切地知道在 innerHTML 中添加或删除了哪些文本，以及在什么位置(作为整个文档 HTML 表示的偏移量)。
我考虑过将内置的 document.execCommand 与 DOM4 的变异观察器一起使用，但 execCommand 似乎无法胜任这项任务:
- 我没有找到“取消加粗”选项的方法
- 生成的 html 似乎因浏览器而异。 (我喜欢 标签而不是 ，但一致性更重要)
- 并且没有关于它如何处理冗余嵌套/相邻 标签的信息。
此外，根据我的需要，使用变异观察器似乎有点矫枉过正。
我的动机:我正在尝试定期将文档更改传输到服务器，而不是重新传输整个文档。我将数据作为 HTML 表示形式上的插入和删除的集合发送。如果有人知道从 CKEditor 中获取此功能的方法(这样我就不必从头开始)，那么我会永远爱你。
注意:执行文本差异不是一种选择，因为它在非常大的文档上的性能很差。
否则，我并不完全害怕尝试编写执行此操作的内容。 DOM 的范围对象提供的方法可以处理很多繁重的工作。我也非常感谢有关这种可能性的建议。
最佳答案
除了使用 execCommand 之外，还有一种替代方法 - 实现编辑器的整个交互，包括光标闪烁。它已经完成了。谷歌在文档中这样做，但也有一些免费和开源的东西。 Cloud9 IDE http://c9.io有一个实现。 AFAIK，github 现在使用该编辑器有一段时间了。而且您肯定可以在其下做任何事情，因为不涉及 native 代码 - 就像在 execCommand 中一样
repo 协议(protocol)在这里:https://github.com/ajaxorg/cloud9 (它包含整个 IDE，您需要找到编辑器的代码。)
此外 - 不推荐使用 dom 突变事件。如果您可以放弃对旧浏览器的支持，请尝试 mutation observer .如果不是 - 尽量避免检测 DOM 更改并拦截编辑器实现中的更改。这也可能是新浏览器的方式。
关于javascript - 有比 document.execCommand 更好的东西吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12251629/