顧名思義,在線編輯器就是用于在線編輯的工具,編輯的內容是基于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技術:HTML在線編輯器的基本概念與相關資料第1/2頁,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。