HTML在線編輯器的基本概念與相關資料第1/2頁

2024-09-06 12:43:03

字體：大中小

來源：轉載

供稿：網友

1，什么是HTML在線編輯器
顧名思義，在線編輯器就是用于在線編輯的工具，編輯的內容是基于HTML的文檔。
2，HTML在線編輯器有什么用？
因為HTML在線編輯器可用于在線編輯基于HTML的文檔，所以，它經常被用于留言板留言、論壇發貼、Blog編寫日志或等需要用戶輸入普通HTML的地方。
3，什么是DHTML
DHTML是一些現有網頁技術與標準的整合，通過它，網頁設計可以用一種新的方式創建網頁。
4，DHTML與HTML關系
DHTML是以HTML語言為基礎，但是相較于以單純的HTML來設計網頁的方法，HTML所帶來的最大轉變，在于它加入了“對象化”的網頁特征。動態HTML對象模型定義了用于描述網頁及其內部元素的對象，每個對象都有描述其自身狀態的屬性和描述其行為的方法，它們也可以處理特定類型的事件，因此，網頁設計者可以通過Script程序來控制或調用這些對象。
5，DHTML與HTML在線編輯器的關系
要做在線編輯器就需要用到DHTML，因為HTML在線編輯器要能在線地編輯，需要“動態”地改變網頁對象的屬性，而DHTML正好滿足了這個需要。
HTML在線編輯器有哪些
http://www.cnbruce.com/blog/showlog.asp?cat_id=27&log_id=1021
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的內容提交了。

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：用JavaScript實現仿Windows關機效果

下一篇：JavaScript觸發器詳解