不要再用 iframe 來作了啊！
當在網頁裡製作表單時，常常會用到所見即所得的編輯器，好讓使用者能夠輸入格式化的多行文字（常用於「說明」這個欄位），雖然已經有一些還不錯用的 TinyMCE 或是 FCKeditor 可以使用，但這些 project 已經發展了一段時間，如果要動手去改這些 source 來符合自己的用途，有時候會覺得稍稍力不從心（其實就是懶），所以我才會想開始研究一下怎麼樣自己寫一個 RichTextEditor（以下簡稱 RTE）。
一個典型的 RTE (源自 GMail)
我曾經參考過 GWT 裡實作 RichTextArea 的部份，還有這篇文章，它們有個共同的特點就是直接利用 JavaScript 塞一個 iframe 取代原本網頁中 textarea，理由很簡單，因為 document 物件有個 designMode 的 attribute，把它的值設成 on 之後，你便可以輕鬆用 document.execCommand('blod', true); 這樣的語法來對編輯區域格式化，詳細的說明可以參考我上述引用的文章。
但其實這麼做了之後，惡夢才正要開始呢！首先你會發現這個 iframe 在 IE 裡有個醜到不行的 inset border，而且 inner padding 似乎改了無用，就像這個樣子：
在 IE 裡塞 iframe 總是有很醜的 inset border & 過大的 inner padding
但如果不用 iframe 的話，textarea 又不能顯示格式化後的文字，那要怎麼弄一個區域給使用者輸入呢？
div。當然不是僅僅使用 div 而已，你必須在這個標籤中設定 contentEditable 這個 attribute，把值設成 true，像是這樣：<div contenteditable="true" ....> .... </div>
如此一來你就會發現你可以這個 div 上面編輯多行文字了。只是別忘了 overflow 的問題，如果你不想讓畫面爛掉的話，那就設定一下 CSS 吧：
#rte {
overflow: auto;
}當然，這只能讓你拿到一個「可編輯的區域」，那格式化的部份呢？這就要自己實作一個 toolbar，然後在特定按鈕被 click 的時候，塞入適當的 <span style="......"></span> 就好了，比方說你要粗體，那就在游標處加上 <strong>...</strong> 或是 <span style="font-weight:bold"> ... </span> 囉！
文章分類: 
標籤: 
2008/05/05 5:32 pm
YUI的Rich Text Editor如何?
http://developer.yahoo.com/yui/editor/
2008/05/05 5:34 pm
@lanma
我只是順便研究一下怎麼自己做啊～
要直接用別人的當然選擇很多 :P
2008/05/05 5:39 pm
我現在用ruby做一個系統，RichTextEditor的部份是用Dojo做的。http://firestoke.net/blog/?p=59
當初也是有考慮用GWT來做，可是想到如果要用GWT做的話，中間傳值就必須用JSON來處理，有點兒麻煩…
所以最後還是決定用純javascript的dojo editor
現在用起來還算OK，但是沒有Plain Text Mode及調整字型大小的功能
不過performance有點差，大概dojo的editor要跑一大堆javascript code
不知道你用GWT做的rich text editor跑起來performance如何呢?
一開始會不會一頓一頓的?
2008/05/05 5:43 pm
@firestoke
我用 GWT 是沒碰過一頓一頓的狀況，
不過感覺用 GWT 就要作成 SPA (single page appliaction)，
不然在那裡一直 load JS 就慢死了 XD
2008/05/06 10:45 am
hello, 你给出的不使用 iframe 的原因太过牵强了。
IE 的 iframe 可以经由
frameborder="0"消除这是因为 IE 的 enter 会生成 p tag, 而其它浏览器生成 br（IE 需要 shift + enter）. 如果你在 iframe 里设置了 p {margin:0;}, 就没有这个问题了。事实上 div 也是这样，只不过被你当前的 CSS 设定给覆盖了。我相信，使用div 带来的麻烦远比 iframe 的多。道理很简单，iframe 是一个独立于本页的另外页面，你可以随心所欲而不会影响当前页。iframe makes life easier.
2008/05/06 10:53 am
不好意思，submit 之后才发现 filter 了我的 li tag，为说清楚些，重发一下，ericsk 见谅（顺便把前一条 reply 删了，谢谢，以免造成困扰）。
hello, 你给出的不使用 iframe 的原因太过牵强了。
1. IE 的 iframe 可以经由
frameborder="0"消除。2. 关于 “padding” 问题。这是因为 IE 的 enter 会生成 p tag, 而其它浏览器生成 br（IE 需要 shift + enter）。如果你在 iframe 里设置了 p {margin:0;}, 就没有这个问题了。事实上 div 也是这样，只不过被你当前的 CSS 设定给覆盖了。
我相信，使用div 带来的麻烦远比 iframe 的多。道理很简单，iframe 是一个独立于本页的另外页面，你可以随心所欲而不会影响当前页。iframe makes life easier.
2008/05/06 10:56 am
感謝 @realazy 兄的指正，我再研究看看好了，有心得的話再來補記一篇