[英]Is there something better than document.execCommand?
When implementing a web-based rich-text editor, I read that document.execCommand
is useful for performing operations on an HTML document (like making a selection bold).在实现基于 Web 的富文本编辑器时,我了解到document.execCommand
可用于对 HTML 文档执行操作(例如将选择设为粗体)。 However, I need something a bit better.但是,我需要更好的东西。 Specifically, I need to know exactly what text is added or removed from the innerHTML, and in what location (as an offset into the entire document's HTML representation).具体来说,我需要确切地知道在 innerHTML 中添加或删除了哪些文本,以及在什么位置(作为整个文档的 HTML 表示的偏移量)。
I considered using the built in document.execCommand along side DOM4's mutation observer, but execCommand doesn't seem up to the task:我考虑过在 DOM4 的变异观察器旁边使用内置的 document.execCommand,但 execCommand 似乎不能胜任这项任务:
Also, using mutation observer seems a bit overkill based on my needs.此外,根据我的需要,使用突变观察器似乎有点矫枉过正。
My motivation: I'm trying to transmit document changes to the server periodically without re-transmitting the whole document.我的动机:我试图定期将文档更改传输到服务器,而无需重新传输整个文档。 I'm sending the data as a collection of insertions and deletions upon the HTML representation.我将数据作为 HTML 表示的插入和删除的集合发送。 If someone knows a way to get this functionality out of, say, CKEditor (so I don't have to start from scratch), then I would love you forever.如果有人知道从 CKEditor 中获取此功能的方法(所以我不必从头开始),那么我会永远爱你。
Note: Performing a text diff is not an option, due to its poor performance on very large documents.注意:执行文本差异不是一种选择,因为它在非常大的文档上性能很差。
Otherwise, I'm not exactly afraid of trying to write something that does this.否则,我并不完全害怕尝试写一些这样做的东西。 The methods provided by the DOM's range object would handle a lot of the heavy lifting. DOM 的 range 对象提供的方法可以处理很多繁重的工作。 I'd also appreciate advice regarding this possibility.我也很感激有关这种可能性的建议。
There is one alternative to using execCommand - implementing the whole interaction of an editor including blinking of a cursor.使用 execCommand 有一种替代方法 - 实现编辑器的整个交互,包括光标的闪烁。 And it has been done.它已经完成了。 Google does it in docs, but there's something free and open-source too.谷歌在文档中这样做,但也有一些免费和开源的东西。 Cloud9 IDE http://c9.io has an implementation. Cloud9 IDE http://c9.io有一个实现。 AFAIK, github uses that editor for some time now. AFAIK,github 使用该编辑器已有一段时间了。 And you surely can do anything under that, because there's no native code involved - like in execCommand并且您肯定可以在此之下做任何事情,因为不涉及本机代码 - 就像在 execCommand 中一样
The repo is here: https://github.com/ajaxorg/cloud9 (it contains the whole IDE, you will need to find the code for the editor. ) repo 在这里: https : //github.com/ajaxorg/cloud9 (它包含整个 IDE,您需要找到编辑器的代码。)
Also - dom mutation events are deprecated.此外 - 不推荐使用 dom 突变事件。 If you can drop support for old browsers, try mutation observer .如果您可以放弃对旧浏览器的支持,请尝试突变观察者。 If not - try to avoid detecting DOM changes at all and intercept changes in the editor's implementation.如果没有 - 尽量避免检测 DOM 更改并拦截编辑器实现中的更改。 It might be the way to go for the new browsers too.这也可能是适用于新浏览器的方法。
有Trix富文本编辑器,从他们的描述来看,避免不一致的 execCommand 是项目的重点。
It seems the new standard will be Input Events Level 2 .新标准似乎是Input Events Level 2 。 To me it looks like it will be a revised improved version of execCommand.在我看来,它将是 execCommand 的修订改进版。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.