富文本編輯器的一鍵排版功能

在做CMS系統的時候，用戶常常會從word粘貼一些東西到編輯器中，早起的富文本編輯器也都提供了去除word格式的功能（盡管有時候比較難用），甚至有時候用戶要求打開一個本地的word文件的時候系統能夠直接把word文件轉換為網站上可以直接瀏覽的內容，他們不關心你中間用了什么技術，也有人專門對此做了一些前端控件的開發，然后按用戶進行授權，似乎銷售成績還不錯。

網絡上有很多自稱為“一鍵排版”的小工具，只是他們只是工具，不是類庫或者API，開發者不能直接使用，來分析其中一個是如何實現的，首先下載並安裝，安裝后在系統目錄中能夠看到它主要也是用web編程技術，只是在外面套了一個窗體便於程序的運行，如截圖所示：

 

打開index.html即可找到和“一鍵排版”按鈕對應的函數FormatText，代碼內容如下：

 

 
          function FormatText() { 
          
     
          var myeditor = document.all.Composition; 
          
     
          if (Format == "Normal") { 
          
         
          var temps =  
          new Array(); 
          
         
          var tmps =  
          new Array(); 
          
         
          var sec = myeditor.Document.selection.createRange(); 
          
         
          var tmpText = sec.text; 
          
         
          var isPart = tmpText !=  
          null && tmpText.trim().length > 0; 
          
        isPart =  
          false;  
          // 
          暫時無法實現局部格式化 
          
         
          if (!isPart) { 
          
             
          var imgs = myeditor.Document.images; 
          
             
          if (imgs !=  
          null && imgs.length > 0) { 
          
                 
          for (j = 0; j < imgs.length; j++) { 
          
                     
          var t = document.createElement("IMG"); 
          
                    t.alt = imgs[j].alt; 
          
                    t.src = imgs[j].src; 
          
                    t.width = imgs[j].width; 
          
                    t.height = imgs[j].height; 
          
                    t.align = imgs[j].align; 
          
                    temps[temps.length] = t; 
          
                } 
          
                 
          var formatImgCount = 0; 
          
                 
          for (j = 0; j < imgs.length; ) { 
          
                    imgs[j].outerHTML = "\n#FormatImgID_" + formatImgCount + "#\n"; 
          
                    formatImgCount++; 
          
                } 
          
            } 
          
             
          if (iftable.checked) { 
          
                 
          var tables = myeditor.Document.getElementsByTagName("table"); 
          
                 
          if (tables !=  
          null && tables.length > 0) { 
          
                     
          var formatTableCount = 0; 
          
                     
          for ( 
          var k = 0; k < tables.length; ) { 
          
                        tmps[tmps.length] = tables[k].outerHTML; 
          
                        tables[k].outerHTML = "\n#FormatTableID_" + formatTableCount + "#\n"; 
          
                        formatTableCount++; 
          
                    } 
          
                } 
          
            } 
          
             
          var html = processFormatText(myeditor.Document.body.innerText); 
          
             
          var border = ""; 
          
             
          if (ifborder.checked) 
          
                border = "border=\"1\""; 
          
             
          else 
          
                border = ""; 
          
             
          if (temps !=  
          null && temps.length > 0) { 
          
                 
          for (j = 0; j < temps.length; j++) { 
          
                     
          var imghtml = "<center><img src=\"" + temps[j].src + "\" alt=\"" + temps[j].alt + "\" width=\"" + temps[j].width + "\" height=\"" + temps[j].height + "\" align=\"" + temps[j].align + "\" " + border + "></center>"; 
          
                    html = html.replace("#FormatImgID_" + j + "#", imghtml); 
          
                } 
          
            } 
          
             
          if (iftable.checked) { 
          
                 
          if (tmps !=  
          null && tmps.length > 0) { 
          
                     
          for (k = 0; k < tmps.length; k++) { 
          
                        html = html.replace("#FormatTableID_" + k + "#", tmps[k]); 
          
                    } 
          
                } 
          
            } 
          
            Composition.document.body.innerHTML = html; 
          
        }  
          else { 
          
             
          var html = processFormatText(tmpText); 
          
            html = html.toUpperCase(); 
          
            html = html.replace(/<P>　　<\/P>/g, ""); 
          
            html = html.replace(/<P><\/P>/g, ""); 
          
            sec.pasteHTML(html); 
          
        } 
          
    } 
          
     
          else 
          
        alert('必須在設計模式下操作！'); 
          
} 
         

 

 主要也就是實現了：段首（P標記）自動空兩格、圖片自動居中、段與段之間自動空一行之類的功能，那么好了，可以把這些功能集成到富文本編輯器中使用戶不至於在兩個地方對一篇文章進行排版了，其實這樣的代碼也很多，比如CKEditor上的插件實現就很多，一搜一大把，比如一個叫做autoformat的。