在線富文本編輯器如何工作？

Question

我想知道當您從網頁或文檔粘貼文本時， 在線富文本編輯器如何維護格式。 標准textarea框只接受文本，而這些WYSIWYG編輯器似乎使用DIV。 它是如何工作的？

Answer 1

在線富文本編輯器使用contentEditable或designMode來利用瀏覽器對HTML編輯的本機支持。 粘貼到contentEditable或designMode元素時，瀏覽器會將HTML直接放入元素中。 通過粘貼Midas Demo然后使用Firebug的inspect元素來查看您粘貼的HTML，自己嘗試一下。

JavaScript應用程序可以使用execCommand方法在富文本編輯器中格式化用戶的選擇。

Answer 2

WYSIWYG編輯器實際上建立在瀏覽器已經內置的基本HTML編輯功能之上。在Firefox中，該技術稱為Midas 。 在IE中， contentEditable 。

Answer 3

通過使用現有的瀏覽器功能（IE - ContentEditable）。 這允許開發人員讓用戶直接編輯html。 他們通常使用iFrame將可編輯部分與頁面的其余部分分開，但這不是必需的。

然后開發人員可以簡單地讀取iframe（或其他）的html源代碼並完成它們。