快捷導(dǎo)航

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

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

在線編輯器在我們?nèi)粘５捻?xiàng)目開發(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> 