有什么比document.execCommand更好的东西吗

Is there something better than document.execCommand?

本文关键字：更好 execCommand 什么 document      更新时间：2023-09-26

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

我考虑使用内置的document.execCommand和DOM4的突变观测器，但execCommand似乎无法完成任务：

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

此外，根据我的需要，使用突变观测器似乎有点过头了。

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

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

否则，我并不害怕写这样的东西。DOM的range对象提供的方法将处理大量繁重的工作。我也很感激关于这种可能性的建议。

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

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

此外，不赞成使用-dom突变事件。如果您可以放弃对旧浏览器的支持，请尝试mutation observer。如果没有——尽量避免检测DOM更改，并在编辑器的实现中截取更改。这可能也是新浏览器的发展方向。

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

似乎新的标准将是输入事件级别2。对我来说，它看起来像是execCommand的一个改进版。

相关文章：