有没有比document.execCommand更好的东西? [英] Is there something better than document.execCommand?

问题描述

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

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). 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).

我考虑将内置的document.execCommand与DOM4的变异观察器一起使用，但是execCommand似乎不适合该任务:

I considered using the built in document.execCommand along side DOM4's mutation observer, but execCommand doesn't seem up to the task:

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

此外，根据我的需求，使用突变观察器似乎有些过大.

Also, using mutation observer seems a bit overkill based on my needs.

我的动机:我试图定期将文档更改传输到服务器，而不重新传输整个文档.我将数据发送为HTML表示形式上的插入和删除的集合.如果有人知道从CKEditor中删除此功能的方法(这样我就不必从头开始)，那么我会永远爱你.

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. 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.

注意:由于在大型文档上的性能较差，因此无法执行文本差异.

Note: Performing a text diff is not an option, due to its poor performance on very large documents.

否则，我并不完全害怕尝试编写能够做到这一点的东西. DOM的range对象提供的方法将处理很多繁重的工作.我也很感谢有关这种可能性的建议.

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. I'd also appreciate advice regarding this possibility.

推荐答案

有一种使用execCommand的替代方法-实现编辑器的整个交互，包括光标闪烁.它已经完成了. Google在文档中做到了这一点，但也有一些免费和开源的工具. Cloud9 IDE http://c9.io 具有一个实现. AFAIK，github现在使用该编辑器已有一段时间了.而且您肯定可以在此基础上做任何事情，因为不涉及本机代码，例如execCommand

There is one alternative to using execCommand - implementing the whole interaction of an editor including blinking of a cursor. 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. AFAIK, github uses that editor for some time now. And you surely can do anything under that, because there's no native code involved - like in execCommand

此存储库位于: https://github.com/ajaxorg/cloud9 (其中包含整个IDE，则需要找到编辑器的代码.)

The repo is here: https://github.com/ajaxorg/cloud9 (it contains the whole IDE, you will need to find the code for the editor. )

此外-dom突变事件已被弃用.如果您可以放弃对旧浏览器的支持，请尝试变异观察器.如果不是，请尝试避免根本检测到DOM更改，并拦截编辑器实现中的更改.也可能是新浏览器的使用方式.

Also - dom mutation events are deprecated. 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. It might be the way to go for the new browsers too.

这篇关于有没有比document.execCommand更好的东西?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！