24

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

我考虑使用内置的 document.execCommand 与 DOM4 的变异观察者一起使用，但 execCommand 似乎不能胜任这项任务：

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

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

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

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

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

4

3 回答 3

13

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

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

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

于 2012-09-16T21:17:18.790 回答
7

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

于 2017-11-30T20:33:41.337 回答
3

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

于 2021-01-21T21:06:49.863 回答