如何在一個HTML textarea的

Question

我想一個textarea如等

所見即所得的編輯器（如tinyMCE的）在網頁中使用大膽​​，不同的顏色通常是這樣做，但我有麻煩中添加不同風格的顯示風格弄清楚他們是如何做到的。

你不能做到這一點：

alt text http://www.yart.com.au/test/html.gif

那麼它們是如何實現的呢？

Answer 1

歐文有正確的想法。這些庫用iframe替換textarea，然後將iframe的文檔放入designMode或contentEditable模式。這實際上使您可以編輯iframe中的html文檔，而瀏覽器則爲您處理光標和所有擊鍵，併爲您提供可調用的樣式變化（粗體，斜體等）的api。然後，當用戶提交表單時，他們會將iframe中的innerHTML複製到原始文本區域中。有關如何啓用此模式以及您可以使用它的更多詳細信息，請參閱：https://developer.mozilla.org/En/Rich-Text_Editing_in_Mozilla

但是，我建議您使用現有的富文本控件庫之一，如果您希望在您的網站上使用此功能。之前我已經構建過一個，並且發現您將花費大量時間處理瀏覽器不一致問題，以便獲得效果良好的內容。除了啓用編輯功能的差異之外，您還需要規範化所創建的html。例如，IE在用戶按下Enter鍵時創建了<br>元素，FF創建了<p>標籤。對於樣式更改，IE使用<b>,<i>等，而FF使用具有樣式屬性的跨度。

Answer 2

通常他們會用自己的顯示組件（如div）覆蓋textarea。當用戶輸入時，javascript將輸入內容並在顯示區域應用樣式。 textarea的值是帶有html標籤的文本，以指定的樣式呈現它。因此，用戶可以看到樣式文本。

這是當然的簡單說明。

Answer 3

我相信tinymce具體使用表/ iframe用於顯示目的（替代現有的textarea）。準備好保存後，將所有信息複製回textarea進行處理。