長島冰茶的工程師筆記

原文：http://www.wowbox.com.tw/blog/article.asp?id=2213

HTML在線編輯器的基本原理
轉載自：http://www.lfda.gov.cn/bbsxp/ShowPost.asp?ThreadID=692

看了現在網上流行的在線編輯器，也忍不住想瞭解一下原理。下了目前應用最廣泛的eWebEdit，這個是我見到的最強的開源在線編輯器...研究了一天，終於知道了核心原理。

先解釋一下在線編輯器的原理：首先需要IE5.0以上版本的支持。因為IE5.0以上版本有一個編輯狀態，可以在一個iframe裡面輸入文字。然後通過 "document.body.innerHTML"可以獲取iframe裡面的html代碼，這個就是關鍵。那怎麼才能讓ifrmae處於編輯狀態呢，可以用：

程序代碼

function document.onreadystatechange()
{
HtmlEdit.document.designMode="On";
}

函數實現。剩下的問題就是就是取得焦點和選中的值：

程序代碼

HtmlEdit.focus();
var sel = HtmlEdit.document.selection.createRange();

以上2句可以獲取選中的值的html代碼。

到了這裡，基本原理搞清楚了，然後我們可以用 insertHTML("str")方法將html字符替換掉選種的值。以下就給出一個簡單的demo來演示只有加粗效果的在線編輯器。我這裡用了一個textarea來或得iframe裡的html值，實際情況，可以將textarea的display設置成false，然後就可以將iframe的內容提交了。