萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 在線所見即所得HTML編輯器的實現原理淺析

在線所見即所得HTML編輯器的實現原理淺析

   在線所見即所得HTML編輯器的實現原理淺析

        這篇文章主要介紹了在線所見即所得HTML編輯器的實現原理淺析,本文用初始化、打開編輯功能、獲取編輯器的內容、增加樣式設置、再進一步等步驟闡述在線編輯器的基本實現原理,需要的朋友可以參考下

  如今網站開發越來越提倡用戶體驗,為用戶提供便利的工具也越來越多,而在線的HTML內容編輯器應該算是其中比較“古老”的一個了。功能簡單的可以為用戶提供文本的樣式控制,例如文字的顏色、字體大小等;而功能復雜的甚至可以提供類似Word一樣的強大功能。雖然現在各種開源的編輯器非常多,但是真正好用的並不多,所以它們改進工作也一直在進行中。

  如今網上多數的編輯器都有很強大的功能,相對而言,在使用中也需要很多的配置,當然代碼也自然會比較“臃腫”。如果我們並不需要功能那麼強大的編輯器,那麼可以自己實現一個,因為代碼並不復雜。下面是一點個人的經驗,僅供參考(以ExtJS的HTMLEditor為例)。

  1、初始化。當頁面加載完畢後,向頁面添加一個IFrame(可選)。這裡要注意的是,要判斷頁面的狀態,要等頁面完全加載完畢後再進行操作,防止出現找不到某些元素的錯誤。

  2、打開編輯功能。將IFrame設為可以編輯(下面代碼來自ExtJS的HTMLEditor):

   代碼如下:

  // 獲取iframe的window對象

  getWin : function(){

  return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];

  },

  //獲取iframe的document對象

  getDoc : function(){

  return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);

  },

  //打開document對象,向其寫入初始化內容,以兼容FireFox

  doc = this.getDoc();

  doc.open();

  doc.write(' ');

  //打開document對象編輯模式

  doc.designMode = "on";

  doc.close();

  這樣就可以向這個簡單那的編輯器中寫入內容了。

  3、獲取編輯器的內容,代碼如下:

  復制代碼 代碼如下:

  //獲取編輯器的body對象

  var body = doc.body || doc.documentElement;

  //獲取編輯器的內容

  var content = body.innerHTML;

  //對內容進行處理,例如替換其中的某些特殊字符等等

  //Some code

  //返回內容

  return content;

  4、增加樣式設置。上面的編輯器雖然實現了基本功能,但是實在是有些太簡單了,應該增加些簡單的樣式實現。document的execCommand方法使這種想法成為可能。

  代碼如下:

  //統一的執行命令方法

  function execCmd(cmd, value){

  //doc對象的獲取參照上面的代碼

  //調用execCommand方法執行命令

  doc.execCommand(cmd, false, value === undefined ? null : value);

  };

  //將選中字體變為黑體,Ctrl-B

  execCmd('bold');

  //加下劃線,Ctrl-U

  execCmd('underline');

  //變為斜體,Ctrl-I

  execCmd('italic');

  //設置文字的顏色

  execCmd('forecolor', Ext.isSafari || Ext.isIE ? '#'+color : color);

  //在光標處插入一段內容

  function insertAtCursor(text){

  //win對象的獲取參考上面的代碼

  if(Ext.isIE){

  win.focus();

  var r = doc.selection.createRange();

  if(r){

  r.collapse(true);

  r.pasteHTML(text); }

  }else if(Ext.isGecko || Ext.isOpera){

  win.focus();

  execCmd('InsertHTML', text);

  }else if(Ext.isSafari){

  execCmd('InsertText', text);

  }

  }

  5、再進一步。如今可以改變樣式了,如果編輯器有工具欄(這應該是必然的),那麼我們還想工具欄上的按鈕根據光標所處位置的樣式,自動處於突出或正常顯示。document的queryCommandState()方法又讓這種想法得以實現。

  代碼如下:

  //doc對象的獲取參考上面的對面

  //光標處是否是粗體

  var isBold = doc.queryCommandState('bold');

  if(isBold){

  //改變Bold按鈕的樣式

  }

  //當然上面的代碼是可以合並的,這裡只不過是一個示意

  //下劃線

  doc.queryCommandState('underline');

  //斜體

  doc.queryCommandState('italic');

  本文只是為實現編輯器提供了簡單的思路,其中的一些代碼是可以直接使用的。建議,想自己實現編輯器的朋友可以參考下ExtJS中的HTMLEditor代碼,既簡單又比較清晰,可以在其上進行擴展。

  最後提醒一點:一定要注意浏覽器的兼容性問題,並且不要等接近尾聲了再去測試兼容性,對於這麼大量的JavaScript代碼,調整是比較痛苦的事情。

copyright © 萬盛學電腦網 all rights reserved