HTML在線編輯器的基本概念與相關(guān)資料第1/2頁
更新時間:2007年03月09日 00:00:00 作者:
1,什么是HTML在線編輯器
顧名思義,在線編輯器就是用于在線編輯的工具,編輯的內(nèi)容是基于HTML的文檔。
2,HTML在線編輯器有什么用?
因為HTML在線編輯器可用于在線編輯基于HTML的文檔,所以,它經(jīng)常被用于留言板留言、論壇發(fā)貼、Blog編寫日志或等需要用戶輸入普通HTML的地方。
3,什么是DHTML
DHTML是一些現(xiàn)有網(wǎng)頁技術(shù)與標準的整合,通過它,網(wǎng)頁設(shè)計可以用一種新的方式創(chuàng)建網(wǎng)頁。
4,DHTML與HTML關(guān)系
DHTML是以HTML語言為基礎(chǔ),但是相較于以單純的HTML來設(shè)計網(wǎng)頁的方法,HTML所帶來的最大轉(zhuǎn)變,在于它加入了“對象化”的網(wǎng)頁特征。動態(tài)HTML對象模型定義了用于描述網(wǎng)頁及其內(nèi)部元素的對象,每個對象都有描述其自身狀態(tài)的屬性和描述其行為的方法,它們也可以處理特定類型的事件,因此,網(wǎng)頁設(shè)計者可以通過Script程序來控制或調(diào)用這些對象。
5,DHTML與HTML在線編輯器的關(guān)系
要做在線編輯器就需要用到DHTML,因為HTML在線編輯器要能在線地編輯,需要“動態(tài)”地改變網(wǎng)頁對象的屬性,而DHTML正好滿足了這個需要。
HTML在線編輯器有哪些
http://www.cnbruce.com/blog/showlog.asp?cat_id=27&log_id=1021
HTML在線編輯器的基本原理
轉(zhuǎn)載自:http://www.lfda.gov.cn/bbsxp/ShowPost.asp?ThreadID=692
看了現(xiàn)在網(wǎng)上流行的在線編輯器,也忍不住想了解一下原理。下了目前應(yīng)用最廣泛的eWebEdit,這個是我見到的最強的開源在線編輯器...研究了一天,終于知道了核心原理。
先解釋一下在線編輯器的原理:首先需要IE5.0以上版本的支持。因為IE5.0以上版本有一個編輯狀態(tài),可以在一個iframe里面輸入文字。然后通過 "document.body.innerHTML"可以獲取iframe里面的html代碼,這個就是關(guān)鍵。那怎么才能讓ifrmae處于編輯狀態(tài)呢,可以用:
function document.onreadystatechange()
{
HtmlEdit.document.designMode="On";
}
函數(shù)實現(xiàn)。剩下的問題就是就是取得焦點和選中的值:
HtmlEdit.focus();
var sel = HtmlEdit.document.selection.createRange();
以上2句可以獲取選中的值的html代碼。
到了這里,基本原理搞清楚了,然后我們可以用 insertHTML("str")方法將html字符替換掉選種的值。以下就給出一個簡單的demo來演示只有加粗效果的在線編輯器。我這里用了一個textarea來或得iframe里的html值,實際情況,可以將textarea的display設(shè)置成false,然后就可以將iframe的內(nèi)容提交了。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
顧名思義,在線編輯器就是用于在線編輯的工具,編輯的內(nèi)容是基于HTML的文檔。
2,HTML在線編輯器有什么用?
因為HTML在線編輯器可用于在線編輯基于HTML的文檔,所以,它經(jīng)常被用于留言板留言、論壇發(fā)貼、Blog編寫日志或等需要用戶輸入普通HTML的地方。
3,什么是DHTML
DHTML是一些現(xiàn)有網(wǎng)頁技術(shù)與標準的整合,通過它,網(wǎng)頁設(shè)計可以用一種新的方式創(chuàng)建網(wǎng)頁。
4,DHTML與HTML關(guān)系
DHTML是以HTML語言為基礎(chǔ),但是相較于以單純的HTML來設(shè)計網(wǎng)頁的方法,HTML所帶來的最大轉(zhuǎn)變,在于它加入了“對象化”的網(wǎng)頁特征。動態(tài)HTML對象模型定義了用于描述網(wǎng)頁及其內(nèi)部元素的對象,每個對象都有描述其自身狀態(tài)的屬性和描述其行為的方法,它們也可以處理特定類型的事件,因此,網(wǎng)頁設(shè)計者可以通過Script程序來控制或調(diào)用這些對象。
5,DHTML與HTML在線編輯器的關(guān)系
要做在線編輯器就需要用到DHTML,因為HTML在線編輯器要能在線地編輯,需要“動態(tài)”地改變網(wǎng)頁對象的屬性,而DHTML正好滿足了這個需要。
HTML在線編輯器有哪些
http://www.cnbruce.com/blog/showlog.asp?cat_id=27&log_id=1021
HTML在線編輯器的基本原理
轉(zhuǎn)載自:http://www.lfda.gov.cn/bbsxp/ShowPost.asp?ThreadID=692
看了現(xiàn)在網(wǎng)上流行的在線編輯器,也忍不住想了解一下原理。下了目前應(yīng)用最廣泛的eWebEdit,這個是我見到的最強的開源在線編輯器...研究了一天,終于知道了核心原理。
先解釋一下在線編輯器的原理:首先需要IE5.0以上版本的支持。因為IE5.0以上版本有一個編輯狀態(tài),可以在一個iframe里面輸入文字。然后通過 "document.body.innerHTML"可以獲取iframe里面的html代碼,這個就是關(guān)鍵。那怎么才能讓ifrmae處于編輯狀態(tài)呢,可以用:
function document.onreadystatechange()
{
HtmlEdit.document.designMode="On";
}
函數(shù)實現(xiàn)。剩下的問題就是就是取得焦點和選中的值:
HtmlEdit.focus();
var sel = HtmlEdit.document.selection.createRange();
以上2句可以獲取選中的值的html代碼。
到了這里,基本原理搞清楚了,然后我們可以用 insertHTML("str")方法將html字符替換掉選種的值。以下就給出一個簡單的demo來演示只有加粗效果的在線編輯器。我這里用了一個textarea來或得iframe里的html值,實際情況,可以將textarea的display設(shè)置成false,然后就可以將iframe的內(nèi)容提交了。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
javascript中導(dǎo)出與導(dǎo)入實現(xiàn)模塊化管理教程
這篇文章主要給大家介紹了關(guān)于javascript中導(dǎo)出與導(dǎo)入實現(xiàn)模塊化管理的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
javascript設(shè)計模式之策略模式學(xué)習(xí)筆記
這篇文章主要介紹了javascript設(shè)計模式之策略模式學(xué)習(xí)筆記,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02
基于JS實現(xiàn)密碼框(password)中顯示文字提示功能代碼
這篇文章主要介紹了實現(xiàn)密碼框(password)中顯示文字提示功能代碼,在項目開發(fā)中經(jīng)常會用到,需要的朋友可以參考下2016-05-05
JavaScript實現(xiàn)樹結(jié)構(gòu)轉(zhuǎn)換的五種方法總結(jié)
在?JavaScript?編程中,將數(shù)組轉(zhuǎn)換為樹結(jié)構(gòu)是一個常見的需求。本篇博客將介紹五種常用的方法來實現(xiàn)數(shù)組轉(zhuǎn)樹結(jié)構(gòu),希望對大家有所幫助2023-03-03
微信小程序調(diào)用wx.getImageInfo遇到的坑解決
這篇文章主要介紹了微信小程序調(diào)用wx.getImageInfo遇到的坑解決,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05

