不一样的在线编辑器

 前一段時間一直在開發考試系統，出題部分需要在線編輯器，那麼道選當然是FCKEditor編輯器，FCK好是好，但也太龐大了，很多功能都用不上，而且非常消耗資源。如果一個頁面有幾個FCK插件那物理內存大半要給吃掉了，無耐了一陣子，去網上繼續找，始終找不到一個合適的編輯器，只好自己寫一個了。

第一步，必備知識Document.exeCommand的用途。

　　在線編輯器的一般功能直接有Document.exeCommand可以實現。比如：複製、剪切、粘貼、項目符號等等。

第二步，排除耗資源的源頭，用DIV代替IFrame。

　　DIV標籖中加多contentEditable屬性後就可以像文本域一樣可編輯了。

     當在可編輯的DIV中直接按回車是插入<p>而不是<br>,在DIV的onkeydown事件調用下面的函數即可：

Code
1function edit(){
2  if(event.keyCode==13){
3    var textRange=document.selection.createRange();   
4    textRange.text="/r/n";   
5   textRange.select();   
6    event.returnValue=false;
7  }
8}

 

第三步，輕鬆解決圖像上傳功能。

     將圖像插入DIV中，代碼如下：

Code
1function loadIMG(path,parObj) {   //path是圖片的路徑，parObj是Div的對象
2  var oImg=document.createElement("IMG");
3  oImg.src=path
4  oImg.align="center";
5  parObj.appendChild(oImg);
6}

 

第四步，提交DIV中的內容。

　　雖然DIV包括在表單中，但提交表單的時候DIV是不被提交的，這時，需要用一個Hidden文件框要輔助，代碼如下：

1function divToHid(hidName,divName) { //hidName為Hidden方本框的ID值，divName為DIV的ID值
2  document.getElementById(hidName).value=document.getElementById(divName).innerHTML;
3}

 

　　經過以上四步，一個簡單的在線編輯器就完成了。優點在於消耗資源極小，加載速度極快，代碼和原理清晰明朗。