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

2024-09-06 12:43:03

字體：大中小

來源：轉載

供稿：網友

在線編輯器在我們日常的項目開發中非常有用（如新聞系統），它可以方便地實現文章的在線編輯，省掉了FrontPage等工具。那么是怎樣實現瀏覽器在線編輯功能的呢?  首先需要IE的支持,在IE5.5以后就有一個編輯狀態. 就是利用這個編輯狀態,然后用javascript來控制在線編輯的。
     首先要有一個編輯框，這個編輯框其實就是一個可編輯狀態的網頁，我們用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，所以必須創建一個新的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() ;

上一篇：鼠標經過時鏈接文字的特別震撼的顯示效果

下一篇：js中slice()方法的使用說明