有比 document.execCommand 更好的東西嗎？

Question

在實現基於 Web 的富文本編輯器時，我了解到document.execCommand可用於對 HTML 文檔執行操作（例如將選擇設為粗體）。 但是，我需要更好的東西。 具體來說，我需要確切地知道在 innerHTML 中添加或刪除了哪些文本，以及在什么位置（作為整個文檔的 HTML 表示的偏移量）。

我考慮過在 DOM4 的變異觀察器旁邊使用內置的 document.execCommand，但 execCommand 似乎不能勝任這項任務：

• 我沒有看到“取消粗體”選擇的方法
• 生成的 html 似乎因瀏覽器而異。 （我想要<span>標簽而不是<b>，但一致性更重要）
• 並且沒有關於它如何處理冗余嵌套/相鄰 <span> 標簽的信息。

此外，根據我的需要，使用突變觀察器似乎有點矯枉過正。

我的動機：我試圖定期將文檔更改傳輸到服務器，而無需重新傳輸整個文檔。 我將數據作為 HTML 表示的插入和刪除的集合發送。 如果有人知道從 CKEditor 中獲取此功能的方法（所以我不必從頭開始），那么我會永遠愛你。

注意：執行文本差異不是一種選擇，因為它在非常大的文檔上性能很差。

否則，我並不完全害怕嘗試寫一些這樣做的東西。 DOM 的 range 對象提供的方法可以處理很多繁重的工作。 我也很感激有關這種可能性的建議。

Answer 1

使用 execCommand 有一種替代方法 - 實現編輯器的整個交互，包括光標的閃爍。 它已經完成了。 谷歌在文檔中這樣做，但也有一些免費和開源的東西。 Cloud9 IDE http://c9.io有一個實現。 AFAIK，github 使用該編輯器已有一段時間了。 並且您肯定可以在此之下做任何事情，因為不涉及本機代碼 - 就像在 execCommand 中一樣

repo 在這里： https : //github.com/ajaxorg/cloud9 （它包含整個 IDE，您需要找到編輯器的代碼。）

此外 - 不推薦使用 dom 突變事件。 如果您可以放棄對舊瀏覽器的支持，請嘗試突變觀察者。 如果沒有 - 盡量避免檢測 DOM 更改並攔截編輯器實現中的更改。 這也可能是適用於新瀏覽器的方法。

Answer 2

有Trix富文本編輯器，從他們的描述來看，避免不一致的 execCommand 是項目的重點。

Answer 3

新標准似乎是Input Events Level 2 。 在我看來，它將是 execCommand 的修訂改進版。