textarea中的粗體文本

我正在嘗試編寫一個非常簡單的wysiwyg編輯器，用戶可以在選擇部分文本後簡單地添加粗體文本，超鏈接和項目符號。實際上就像CKEditor一樣。textarea中的粗體文本

但據我所知，沒有辦法將格式添加到textarea。所以我想知道，像CKEditor這樣的其他wysiwyg編輯如何解決這個問題。

2010-07-23 Jules Colle

基於瀏覽器的所見即所得編輯器通過爲您正在編輯的文檔/文本構建HTML來工作。換句話說，你基本上是在瀏覽器中編輯HTML，而不是3210中的文本。您可能需要查看Rich Text Editor的源代碼，並在開始編寫所有內容之前查看Mozilla的Midas Specification。

來源

2010-07-23 23:05:38

那麼，這不會回答關於他們如何做的問題，但您可以將樣式應用於textarea。剛剛嘗試：

<textarea style="font-weight:bold;"> </textarea>

至於像CKEditor的編輯們是怎麼做的，大多數人是通過施加一噸的JavaScript和CSS做出<div>看起來像一個<textarea>。這就是我在AJAX的MS課程中所做的。此外，如果您在CKEditor demo上查看呈現的源代碼，則會看到輸入區域的所有內容都是<div>元素的組合。

來源

2010-07-23 22:49:55

是的，似乎沒有簡單的方法來快速製作自己的基本wysiwyg編輯器。我還發現整個編輯區域實際上是一個內嵌完整html代碼的iframe。所以，當你鍵入時，你的擊鍵被捕獲並且i幀被更新。他們如何讓閃爍的遊標出現，並知道iframe中當前的光標位置對我而言仍然有點神祕。但我知道我現在必須做的事情：我只是使用ckeditor，而不是編寫我自己的基本編輯器，而不是編寫自己的基本編輯器 – 2010-07-24 11:38:21

您需要使用contenteditable屬性。谷歌搜索會給你很多的信息和例子

來源

2010-07-23 22:50:13 barrylloyd

只需注意一下，contenteditable就是HTML5，它仍然是非常新的並且尚未得到廣泛支持（希望很快雖然）。 – 2010-07-23 22:54:00

確實如此，但它至少在IE，Safari，Firefox和Opera的最新版本中都可用。雖然這是非常困難的工作，並在每個瀏覽器工作方式不同。 – barrylloyd 2010-07-23 22:56:06

他不需要*使用'contenteditable'。在推出contenteditable之前，第一批JS基於所見即所得的編輯人員寫得很好。 – 2010-07-23 23:28:57

大多數所見即所得，就像TinyMCE使用純JavaScript覆蓋，以提供一個豐富的文本編輯器，查找textarea的HTML標籤，以取代其豐富的一個基本的文本編輯器。

JavaScript編輯器的確在做的是在文本內容中添加合適的html標籤，如<b>或<i>。

這就是爲什麼當您將所見即所得編輯器的內容提交給服務器時，您通常會獲得html。

來源

2010-07-23 22:50:17

textarea中的粗體文本

回答

相關問題