在線編輯器的實現原理(兼容IE和FireFox)

更新時間：2007年03月09日 00:00:00 作者：

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

復制代碼代碼如下:

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

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

     //但是IE與FireFox有點不同，為了兼容FireFox，所以必須創(chuàng)建一個新的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(); 
     //獲得選取的焦點 
     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> 