富文本編輯器如何工作以及如何構建基本編輯器？

Question

我以為我非常了解JavaScript，但后來我想到了富文本編輯器的工作方式，比如CKeditor，並意識到我不知道。

我假設按鈕以某種方式通過JavaScript連接到文本區域，但它是如何標記的。

網絡上的富文本編輯器有什么特別之處，還是只是很多花哨的js？

Answer 1

很多fancy.js，曾經是DOM的MS擴展名為“contentEditable”，它基本上將任何dom元素轉換為簡單的文本編輯器。 JS允許做粗體/斜體/字體/插入其他DOM元素（表格，圖像等等）。 但最終歸結為contentEditable。

Answer 2

結帳這個：

http://www-archive.mozilla.org/editor/midasdemo/

並且： https ： //developer.mozilla.org/en/rich-text_editing_in_mozilla

Answer 3

你可以用div元素的contentEditable屬性來做。假設你有粗體按鈕。 用戶點擊它，然后你調用一個js函數並打開一個像<b>的標簽，當用戶點擊普通按鈕你關閉它..它與顏色相同..打開一個<span style="backround-color:red"> ..它基本上是用js設置div文本的樣式..嘗試jquery以便於dom操作。