快捷導(dǎo)航

在線編輯器的實(shí)現(xiàn)原理(兼容IE和FireFox)

更新時(shí)間：2007年03月09日 00:00:00 作者：

在線編輯器在我們?nèi)粘５捻?xiàng)目開(kāi)發(fā)中非常有用（如新聞系統(tǒng)），它可以方便地實(shí)現(xiàn)文章的在線編輯，省掉了FrontPage等工具。那么是怎樣實(shí)現(xiàn)瀏覽器在線編輯功能的呢?  首先需要IE的支持,在IE5.5以后就有一個(gè)編輯狀態(tài). 就是利用這個(gè)編輯狀態(tài),然后用javascript來(lái)控制在線編輯的。
     首先要有一個(gè)編輯框，這個(gè)編輯框其實(shí)就是一個(gè)可編輯狀態(tài)的網(wǎng)頁(yè)，我們用iframe來(lái)建立編輯框。
     <IFRAME id=“HtmlEdit” style="WIDTH: 100%; HEIGHT: 296px" marginWidth=“0” marginHeight=“0”></IFRAME>
     并且在加上javascript代碼來(lái)指定HtmlEdit有編輯功能(下面提供完整的原代碼)：

復(fù)制代碼代碼如下:

<script language="javascript"> 
     var editor; 
     editor = document.getElementById("HtmlEdit").contentWindow; 

     //只需鍵入以下設(shè)定，iframe立刻變成編輯器。 
     editor.document.designMode = 'On'; 
     editor.document.contentEditable = true; 

     //但是IE與FireFox有點(diǎn)不同，為了兼容FireFox，所以必須創(chuàng)建一個(gè)新的document。 
     editor.document.open(); 
     editor.document.writeln('<html><body></body></html>'); 
     editor.document.close(); 

     //字體特效 － 加粗方法一  
     function addBold() 
     { 
     editor.focus(); 
     //所有字體特效只是使用execComman()就能完成。 
     editor.document.execCommand("Bold", false, null); 
     } 
     //字體特效 － 加粗方法二  
     function addBold() 
     { 
     editor.focus(); 
     //獲得選取的焦點(diǎn) 
     var sel = editor.document.selection.createRange(); 
     insertHTML("<b>"+sel.text+"</b>"); 
     } 
     function insertHTML(html) 
     { 
         if (editor.document.selection.type.toLowerCase() != "none") 
         { 
         editor.document.selection.clear() ; 
         } 
         editor.document.selection.createRange().pasteHTML(html) ;  
     } 

  </script> 

在線編輯器的實(shí)現(xiàn)原理(兼容IE和FireFox)

相關(guān)文章

JavaScript實(shí)現(xiàn)的多種鼠標(biāo)拖放效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的多種鼠標(biāo)拖放效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11
在線所見(jiàn)即所得HTML編輯器的實(shí)現(xiàn)原理淺析
這篇文章主要介紹了在線所見(jiàn)即所得HTML編輯器的實(shí)現(xiàn)原理淺析,本文用初始化、打開(kāi)編輯功能、獲取編輯器的內(nèi)容、增加樣式設(shè)置、再進(jìn)一步等步驟闡述在線編輯器的基本實(shí)現(xiàn)原理,需要的朋友可以參考下
2015-04-04
用js實(shí)現(xiàn)每隔一秒刷新時(shí)間的實(shí)例(含年月日時(shí)分秒)
下面小編就為大家?guī)?lái)一篇用js實(shí)現(xiàn)每隔一秒刷新時(shí)間的實(shí)例(含年月日時(shí)分秒)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
javascript使用avalon綁定實(shí)現(xiàn)checkbox全選
checkbox全選應(yīng)該是一個(gè)比較實(shí)用的前端技巧吧，很多時(shí)候我們都需要點(diǎn)擊一個(gè)checkbox，然后將所有的復(fù)選框自動(dòng)全部選中，一些CMS系統(tǒng)的后臺(tái)中，使用本JS效果后，會(huì)大大增強(qiáng)了操作體驗(yàn)，那么究竟是如何實(shí)現(xiàn)這一功能的呢？
2015-05-05
開(kāi)啟Javascript中apply、call、bind的用法之旅模式
在Javascript中，F(xiàn)unction是一種對(duì)象。Function對(duì)象中的this指向決定于函數(shù)被調(diào)用的方式,使用apply，call 與 bind 均可以改變函數(shù)對(duì)象中this的指向。
2015-10-10
JS使用tofixed與round處理數(shù)據(jù)四舍五入的區(qū)別
js中一般使用tofixed與round處理數(shù)據(jù)四舍五入，那么tofixed與round有什么區(qū)別呢？下面小編給大家分享JS使用tofixed與round處理數(shù)據(jù)四舍五入的區(qū)別，需要的朋友參考下吧
2017-10-10
怎么理解wx.navigateTo的events參數(shù)使用詳情
這篇文章主要介紹了怎么理解wx.navigateTo的events參數(shù)使用詳情，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
詳解Javascript中document.execCommand()的用法以及指令參數(shù)列表
execCommand方法是執(zhí)行一個(gè)對(duì)當(dāng)前文檔，當(dāng)前選擇或者給出范圍的命令。在HTML5中，execCommand可以通過(guò)JavaScript代碼來(lái)調(diào)用，使得開(kāi)發(fā)者可以在網(wǎng)頁(yè)中實(shí)現(xiàn)一些復(fù)雜的文本操作。在HTML編輯器中這個(gè)命令用得很多，酷炫的強(qiáng)大功能。
2023-07-07
js實(shí)現(xiàn)的簡(jiǎn)潔網(wǎng)頁(yè)滑動(dòng)tab菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)的簡(jiǎn)潔網(wǎng)頁(yè)滑動(dòng)tab菜單效果代碼,可實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)滑過(guò)tab標(biāo)簽切換的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-08-08
多種方法實(shí)現(xiàn)load加載完成后把圖片一次性顯示出來(lái)
如何一個(gè)load 加載完成后把圖片一次性顯示出來(lái)，下面有個(gè)不錯(cuò)的方法，希望對(duì)大家有所幫助
2014-02-02