HTML中的可編輯DOM，如Google文檔

我對編輯Google文檔的工作原理有點好奇。他們是如何在DOM中實現編輯器的？它看起來不像一個帶有textarea的表單，而是一個具有額外光標的普通文檔主體。我想這是一些JavaScript技術背後。HTML中的可編輯DOM，如Google文檔

有沒有免費的庫可以用來實現這種功能，或者我可以自己實現它嗎？

2010-07-26 Johan

它使用內置於所有現代桌面瀏覽器的編輯功能，通過將文檔的designMode屬性設置爲「on」或在元素級別通過添加值爲「true」的contenteditable屬性（也觸發通過將元素的contentEditable屬性設置爲字符串「true」）。

編輯網頁內容的一種非常常見的策略是包含一個iframe，其文檔已打開designMode。

再加上這個是document.execCommand，它在一個可編輯的文檔中可以用來應用各種格式。例如：

document.execCommand("bold", false, null);

...將切換所選文本是否爲粗體。瀏覽器之間有一個共同的命令池，但是在某些實現方式上存在一些差異。更多信息可以發現here at MSDN for IE和here at MDC for Firefox。似乎無法找到WebKit的文檔。

2010-07-26 09:38:12

謝謝！這是我正在尋找的。 – Johan 2010-07-26 11:15:14

對於我來說它看起來像任何HTML編輯器。他們只編寫了自己的JavaScript HTML編輯器。即使是HTML編輯視圖也沒有任何魔力。

一個不錯的免費HTML編輯器TinyMCE，但也有很多其他的，甚至一些非常強大的專有，如PHP和ASP.NET可用的CuteEditor。

順便說一句：該文檔的內容（在谷歌文檔中）被放置在一個iframe中，就像它在CuteEditor中（也可能在TinyMCE中）一樣。

2010-07-26 08:47:13 2ndkauboy

我更感興趣的是在庫中處理文檔模型中的輸入事件而不是完整的文本編輯器像TinyMCE。或者，如果沒有這樣的庫，我想知道如何實現這種用戶界面。 – Johan 2010-07-26 08:53:12

自2010年年中以來，Google Docs似乎完全從依靠瀏覽器切換到編輯模式。

相反，他們使用JavaScript和DOM構建了自己的文本/ HTML編輯器。

在搜索提供類似概念的第三方供應商後，到目前爲止我沒有發現任何人。本來對iOS很好，因爲他們似乎不支持contentEditable屬性，直到iOS 5（甚至於是，然後，there are issues）

2012-06-19 05:29:31

第一個鏈接已損壞，它是https://drive.googleblog.com/2010/05/whats-different-about-new-google-docs.html – whoKnows 2016-12-06 00:35:56

@whoKnows已更改，謝謝。 – 2016-12-06 05:38:14

回答