我想構建一個輕量級的在線文本編輯器，比如google doc，但是比這個輕得多。如何構建一個輕量級的在線文本編輯器？
我的意思是，我只是想實現以下三個功能：
但我我不太清楚如何建立它。
這是我的想法：
將每一行視爲一個div。 監視鍵盤事件，當用戶按下回車鍵，創建一個新的div
按照我的方法，我需要設置div的CONTENTEDITABLE =真 然而，在那之後，每當我打進去，在裏面創建一個新行DIV。
那麼，如何阻止呢？ （它只能通過使用JavaScript解決？） 或者，有沒有其他方式來實現我的目標？
只需使用event.preventDefault();像這樣：
$(document).bind("keydown keypress", function(event) {
if (event.which == 13) {
event.preventDefault();
// Your code here
}
});
我會閱讀鍵盤事件，並修改DOM以反映這些鍵盤更改。你會遇到的最大的問題是定位'caret'（垂直線）。查看這個SO問題正確地執行此操作 - >calculate-text-width-with-javascript
另一個替代方案是我使用的標記。它是一個更輕量級的解決方案，並帶有內置的文本測量功能。谷歌關閉庫有很多內置的支持 - >Closure Library，例如文本選擇 - >Canvas Text
要小心讓人們在你的網頁上做到這一點 - 如果你沒有正確逃避/監測輸入，他們可以在頁面本身造成嚴重破壞，從而阻止他們保存東西等。
大多數這些編輯器將其編輯器實現爲嵌入式iframe。由於它是從同一端口，協議和主機提供的，因此您可以使用完整的腳本訪問它。
因此，您可以在iframe中設置可編輯標籤，並將所有控件保留在iframe之外。當他們點擊一個控件時，你會在iframe中發生這種情況。
當他們保存時，您只需抓取iframe的div的內容。
您可能想看看[CK Editor]（http://ckeditor.com/），即使它提供了很多功能它也允許您配置這些選項，並讓您只顯示那些您需要的...關於亮度（我會留給你）看看它，看看它的光線是否足夠。 – 2012-03-01 11:14:25
爲什麼要重新發明輪子？ http://bower.io/search/?q=editor – k0pernikus 2016-03-22 11:24:59