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

