Google文檔如何實現富文本編輯？

Question

我剛剛閱讀了Nicholas Zakas撰寫的專業JavaScript for Web Developers瀏覽器中的富文本編輯部分。它說有兩種方法去實現富文本編輯：

1. iframe與designMode屬性設置爲on
2. 或contenteditable屬性

元素我得出結論，從這些信息是這兩種技術都存在如此多的跨瀏覽器不一致問題，這兩種技術都不是真正的可靠解決方案。

檢查Google Doc的標記，我看到的只是一堆嵌套的div s。

所以，我很好奇，谷歌認爲哪種技術最適合實現富文本編輯？

Answer 1

Google文檔既不使用designMode也不使用contentEditable。它具有用Javascript編寫的自己的渲染引擎。從他們blog post on it：

爲了解決這些問題，新的谷歌文檔編輯器不 使用瀏覽器來處理可編輯的文本。我們用JavaScript編寫了全新的編輯 曲面和佈局引擎。

和

到目前爲止，編輯器確實是最困難的事情就是找出其中繪製文本。爲此，我們構建了一個新的佈局引擎。以下是新引擎工作原理的例子：假設您輸入字母「a」。我們注意到您按下'a'鍵並通過在屏幕外畫一個'a'來回應。然後我們測量'a'的寬度和高度，將這些測量結果與光標的x和y位置相結合，並將'a'放在屏幕上的正確位置。如果您處於某個單詞的中間，我們會將光標移到光標後面。如果你在一行的最後，編輯會將你的單詞移到下一行，並將任何溢出推到後面的行。