又一編輯神器-百度編輯器-Ueditor

時間 2019-11-09

標籤又一編輯神器百度編輯器 ueditor 简体版

原文原文鏈接

又一編輯神器-百度編輯器-Ueditor

（Lionden<hsdlionden@gmail.com> 轉載說明）　　 javascript

　　前段時間發表過一篇關於「KindEditor在JSP中使用」的博文。這幾天在瀋陽東軟進行JavaWeb方面的實習工做，在一個CMS系統的後臺和博客板塊中又要用到文本編輯器，忽然發現了這個——百度編輯器（官網http://ueditor.baidu.com/website/index.html）。 php

　　Ueditor由百度開發，傳說中的百度更懂中文嘛，不像KindEditor有時會顯示亂碼。Ueditor提供中文「utf-8」和「gbk」版本的下載。並且分爲完整版和定製版。完整版沒什麼可說的，下面說下定製版： css

　　定製版就是能夠選擇本身須要的功能，而後根據用戶所選組件生成下載包。地址（http://ueditor.baidu.com/website/ipanel/panel.html）。定製的內容包括組件，編輯器背景顏色或圖片，編輯器高度和寬度等； html

　　值得一提的是，Ueditor提供了功能說明文檔和使用說明文檔。可讓開發者快速的清楚他能實現的功能，並節約閱讀原JS代碼的時間，熟練的使用Ueditor。文檔連接（http://ueditor.baidu.com/website/document.html），附使用說明文檔（摘自Ueditor官網）：前端

先後端數據交互

2012-05-11 16:09:13

1、富文本內容交互 java

1、編輯器內容初始化（即往編輯器中設置富文本） web

場景一：寫新文章，編輯器中預置提示、問候等內容。 ajax

在editor_config.js文件中找到initialContent參數，設置其值爲須要的提示或者問候語便可，如initialContent:’歡迎使用UEditor!’。數據庫

場景二：編輯舊文章，從數據庫中取出富文本放置到編輯器中。 json

顯然，編輯文章時須要從後臺數據庫中取出大段富文本，若是仍然採用場景一中的方式去設置初始值的話，必然會帶來諸如引號匹配被截斷等問題，所以須要採用另一種方式去設置，以下代碼所示：

                <script type="text/plain" id="editor"> 
              
                    //從數據庫中取出文章內容打印到此處 
              
                </script>

此處採用了script標籤做爲編輯器容器對象，並設置了其類型是純文本，從而在避免了標籤內部JS代碼執行的同時解決了部分同窗在使用傳統的textarea標籤做爲容器所帶來的一次額外轉碼問題。

2、提交編輯器內容至後端

場景一：在編輯器所在的Form中存在提交按鈕，提交動做由點擊此按鈕完成。

該場景適用於最普通的場合，沒有太大問題須要注意，僅三點說明：

1) 默認狀況下提交到後臺的表單名稱是「editorValue」，在editor_config.js中能夠配置，參數名爲textarea。

2) 能夠在容器標籤（即script標籤）上設置name屬性，以覆蓋editor_config.js中的默認配置。實例代碼以下，此處的myContent將成爲新的提交表單名稱：

                <form action="" method="post"> 
              
                    <script type="text/plain" id="editor" name="myContent"> 
              
                    </script> 
              
                    <input type="submit" name="submit" value="提交"> 
              
                </form>

3）後端接收程序能夠經過以下幾種方式來獲取編輯器中的富文本內容。

                //PHP獲取： 
              
                $_POST["myContent"] 
              
                //JSP獲取： 
              
                request.getParameter("myContent"); 
              
                //ASP獲取： 
              
                request("myContent"); 
              
                //NET獲取: 
              
                context.Request.Form["myContent"];

場景二：編輯器所在的Form中不存在提交按鈕，提交動做由外部事件觸發。

該場景適用於站點前端交互較多的場合，須要注意的事項主要是在觸發form提交動做以前執行編輯器內容同步操做。通常的代碼模式以下所示：

                //知足提交條件時同步內容並提交，此處editor爲編輯器實例 
              
                if(editor.hasContent()){ //此處以非空爲例 
              
                    editor.sync();       //同步內容 
              
                    someForm.submit();   //提交Form 
              
                }

此處editor是編輯器實例對象。

場景三：編輯器不在任何Form中，提交動做由外部事件觸發。

該場景使用很少，但特殊時候可能須要。UEditor也提供了對應的處理方案，基本邏輯跟場景二同樣，只是在執行同步操做的時候須要傳入提交form的id，如editor.sync(myFormID)便可。其餘同場景二。

2、圖片上傳交互

1、傳統圖片上傳

傳統圖片上傳涉及到的先後端交互主要涉及「上傳提交路徑」以及「圖片保存路徑」兩個參數，後臺保存路徑以任何形式（絕對或者相對）、在任何頁面展現跟前臺無關。

2、Flash圖片上傳

Flahs圖片上傳和傳統圖片上傳存在一個很大的區別：它須要服務器端實時返回「圖片保存路徑」用於在前臺的即時展現。具體到編輯器，就是須要將返回的路徑插入到編輯器中。由此會引出除傳統圖片上傳中提到的兩個參數以外的第三個參數：「先後端修正路徑」。若是後臺返回的保存路徑是絕對路徑（指以http開頭的路徑，以根目錄開始的路徑也可勉強納入其中），那麼前臺無須作任何修正，不然用戶必須十分清楚本身當前的目錄結構並據此修正這個先後端相對路徑之間的差別。所以，UEditor極力推薦由服務器端返回以根目錄開始的相對路徑。

3、UEditor中的上傳實踐及注意事項

在UEditor中，「上傳提交路徑」和「先後端修正路徑」的配置位於editor_config.js中。其中，imageUrl參數對應着「上傳提交路徑」，imagePath參數對應着「先後端修正路徑」。而「圖片保存路徑」則須要在server/upload/php目錄下的imageUp文件中配置。

路徑配置完成以後，還須要配置imageFieldName參數做爲文件表單的表單名，後臺能夠據此獲取文件句柄。該參數一樣位於editor_config.js中。

                //圖片上傳提交地址 
              
                imageUrl:URL+"server/upload/php/imageUp.php", 
              
                //圖片修正地址，引用了fixedImagePath,若有特殊需求，可自行配置  
              
                imagePath:fixedImagePath, 
              
                //圖片描述的key              
              
                imageFieldName:"upFile", 
              
                //等比壓縮的基準，肯定maxImageSideLength參數的參照對象. 
              
                //0爲按照最長邊，1爲按照寬度，2爲按照高度                       
              
                compressSide:0,    
              
                //上傳圖片最大容許的邊長，超過會自動等比縮放,不縮放就設置一個比較大的值 
              
                //更多設置在image.html中                           
              
                maxImageSideLength:900

完成上述配置以後，理論上後臺應該能夠接收到前臺上傳的圖片文件了。在正確保存以後，傳統圖片上傳至此就結束了。可是，在使用Flash上傳的編輯器中，流程還遠未結束。

首先，後臺須要計算得出圖片文件存放的地址字符串。該字符串UEditor極力推薦使用從網站根目錄開始算起，一直到圖片名結束爲止。若是不從網站根目錄開始算起，後面須要考慮「先後端修正地址」參數。

其次，後臺返回一個json格式的字符串，格式具體要求以下：

1	{ "url":"圖片地址", "title":"圖片描述", "state":"上傳狀態" }

其中，url對應計算出的圖片保存地址——再強調一遍，儘可能構造出從網站根目錄開始的地址字符串；title對應flash中的描述字段，在圖片上將會被設置到title屬性中；state對應服務器端返回的圖片上傳狀態字符：除了上傳成功返回「SUCCESS」以外，其餘任何值都將被直接顯示在返回的圖片描述字段內。

最後，UEditor會在返回的url地址前面增長「先後端修整路徑」這個參數值做爲最後插入編輯器中的圖片地址。所以，若是服務器端返回的是從根目錄開始的圖片路徑或者http開頭的絕對路徑，「先後端修正路徑」必須留空。

舉例來說，若是服務器返回的路徑是「/myProject/uploads/sun.jpg」,那麼插入到編輯器中的路徑會是「先後端修正路徑 + /myProject/uploads/sun.jpg」。

3、Word圖片轉存交互

1、圖片轉存原理

所謂word圖片轉存，是指UEditor爲了解決用戶從word中複製了一篇圖文混排的文章粘貼到編輯器以後，word文章中的圖片數據沒法顯示在編輯器中，也沒法提交到服務器上的問題而開發的一個操做簡便的圖片轉存方案。

該功能的基本操做步驟：複製word文檔——》粘貼到編輯器——》編輯器會將全部圖片轉換成一個佔位圖，同時在工具欄中高亮轉存按鈕——》點擊轉存按鈕彈出圖片上傳框——》點擊複製按鈕複製圖片目錄地址——》點擊「添加照片」按鈕，在彈出的選擇框中粘貼剛複製的圖片目錄地址——》點擊打開按鈕，選擇目錄下的全部圖片文件，在此點擊打開——》執行圖片上傳——》上傳成功確認插入，UEditor將自動完成對應占位圖的替換過程。

2、配置要點及注意事項

word圖片轉存跟普通圖片上傳的配置基本同樣，所不一樣的僅僅是操做上的差別：前者須要首先獲取臨時圖片文件存在的目錄，後者直接選擇本身指定的文件目錄。PS：在部分操做系統的部分版本word中發現單張word圖片會生成兩張臨時圖片，且格式不一，清晰度各異，目前暫時未發現改進方法。

4、遠程圖片抓取交互

1、遠程抓取原理

圖片遠程抓取是指在插入本地域名以外的圖片連接地址時，由服務器將這些外部圖片抓取到本地服務器保存的一個功能。實現原理爲在編輯器中向服務器發送包含全部外域圖片地址的ajax請求，而後由服務器在後端抓取保存後返回圖片地址給編輯器，再由編輯器完成外域地址和本地地址的替換工做。

                //是否開啓遠程圖片抓取 
              
                catchRemoteImageEnable:true, 
              
                //處理遠程圖片抓取的地址 
              
                catcherUrl:URL +"server/submit/php/getRemoteImage.php",  
              
                //提交到後臺遠程圖片uri合集的表單名 
              
                catchFieldName:"upFile",     
              
                //圖片修正地址，同imagePath 
              
                catcherPath:fixedImagePath, 
              
                //本地頂級域名，當開啓遠程圖片抓取時，除此以外的全部其它域名下的 
              
                //圖片都將被抓取到本地                                   
              
                localDomain:["baidu.com","10.81.2.114"],

2、注意事項

遠程抓取功能是否開啓可在edicot_config.js中經過配置catchRemoteImageEnable參數實現。與這個功能相關的配置還包括了遠程抓取的處理程序地址，表單域名稱，本地域和「先後端修正地址」。遠程抓取處理程序實現了依據前端提交的地址列表（使用ue_separate_ue標示符進行分隔的字符串）進行圖片抓取，而後返回地址列表給客戶端的功能。

先後臺交互數據格式樣例：（URL1，URL2，URL3，URL4）

1	URL1ue_separate_ueURL2ue_separate_ueURL3ue_separate_ueURL4

5、圖片在線管理交互

1、圖片在線管理介紹

圖片在線管理是指經過讀取服務器端的文件目錄並將其展現到編輯器中的進行額外一些操做的功能。處於安全考慮，目前UEditor僅實現了圖片二次插入操做，其餘諸如刪除、移動等操做將會在後續二次開發教程中陸續放出。

                //圖片在線管理的處理地址        
              
                imageManagerUrl:URL + "server/submit/php/imageManager.php", 
              
                //圖片修正地址，同imagePath        
              
                imageManagerPath:fixedImagePath

2、注意事項

圖片在線管理須要配置的參數跟遠程圖片抓取一致，二者不一樣的地方是圖片在線管理中的圖片數據是由服務器端指定某個目錄，而後遍歷其下的全部圖片文件獲得，而後將地址返回給編輯器，而遠程圖片抓取則是由編輯器提交圖片地址，通過服務器端的抓取處理後返回新的地址給編輯器。二者的初始觸發都須要ajax的介入。

6、屏幕截圖交互

1、屏幕截圖介紹

使用了ActiveX控件，目前只支持IE瀏覽器。

2、注意事項

須要配置的參數除了跟圖片上傳同樣的內容以外，還多出了服務器地址和端口的配置。具體使用時請根據自身服務器的特色作出適應修改。

                //屏幕截圖的server端文件所在的網站地址或者ip，請不要加 
               http:// 
              
                snapscreenHost: '127.0.0.1',     
              
                //屏幕截圖的server端保存程序，UEditor的範例代碼爲「URL                              
              
                snapscreenServerUrl: URL +"server/upload/php/snapImgUp.php", +"server/upload/php/snapImgUp.php"」 
              
                //屏幕截圖的server端端口 
              
                snapscreenServerPort: 80,  
              
                //截圖的圖片默認的排版方式                                 
              
                snapscreenImgAlign: 'center',  
              
                //截圖顯示修正地址                              
              
                snapscreenPath: fixedImagePath,

7、附件上傳交互

1、附件上傳注意事項

附件上傳的基本配置跟圖片相似。另外，因爲附件上傳採用了至關成熟的swfupload開源框架，所以大部分的文檔和資料儘可參考swfupload的官網教程。官網地址：http：//www.swfupload.org

　　Ueditor的部署說明（摘自Ueditor官網）：

完整版的部署與體驗

2012-05-11 16:16:57

1、官網上下載完整源碼包，解壓到任意目錄，解壓後的源碼目錄結構以下所示：

_examples：編輯器完整版的示例頁面

_demos：編輯器的各類使用案例

dialogs：彈出對話框對應的資源和JS文件

themes：樣式圖片和樣式文件

server：涉及到服務器端操做的PHP、JSP等文件

third-party：第三方插件

editor_all.js：_src目錄下全部文件的打包文件

editor_all_min.js：editor_all.js文件的壓縮版，建議在正式部署時才採用

editor_config.js：編輯器的配置文件，建議和編輯器實例化頁面置於同一目錄

2、部署UEditor到實際項目（UETest）中的步驟:

圖表 1

第一步：在項目的任一文件夾中創建一個用於存放UEditor相關資源和文件的目錄，此處在項目根目錄下創建，起名爲ueditor。

第二步：拷貝源碼包中的dialogs、themes、third-party、editor_all.js和editor_config.js到ueditor文夾中。其中，除了ueditor目錄以外的其他文件均爲具體項目文件，此處所列僅供示例。

第三步：爲簡單起見，此處將以根目錄下的index.php頁面做爲編輯器的實例化頁面，用來展現UEditor的完整版效果。在index.php文件中，首先導入編輯器須要的三個入口文件，示例代碼以下：

                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
              
                <title>編輯器完整版實例</title> 
              
                <script type="text/javascript" src="ueditor/editor_config.js"></script> 
              
                <script type="text/javascript" src="ueditor/editor_all.js"></script> 
              
                <link rel="stylesheet" href="ueditor/themes/default/ueditor.css">

第四步：而後在index.php文件中建立編輯器實例及其DOM容器。具體代碼示例以下：

                <div id="myEditor"></div> 
              
                <script type="text/javascript"> 
              
                    var editor = new baidu.editor.ui.Editor(); 
              
                    editor.render("myEditor"); 
              
                </script>

最後一步：在/UETest/ueditor/ editor_config.js中查找URL變量配置編輯器在你項目中的路徑。

1 2	//強烈推薦以這種方式進行絕對路徑配置 URL= window.UEDITOR_HOME_URL\|\|"/UETest/ueditor/";

至此，一個完整的編輯器實例就已經部署到我們的項目中了！在瀏覽器中輸入http://localhost/UETest 運行下試試UE強大的功能吧！

3、注意事項

1.在引用editor_config.js時，最好先於editor_all.js加載，不然特定狀況下可能會出現報錯。

2.若但願給編輯器賦初值，請將上面描述index.php的div換成初始內容

3. 須要注意的是編輯器資源文件根路徑。它所表示的含義是：以編輯器實例化頁面爲當前路徑，指向編輯器資源文件（即dialog等文件夾）的路徑。鑑於不少同窗在使用編輯器的時候出現的種種路徑問題，此處強烈建議你們使用"相對於網站根目錄的相對路徑"進行配置。"相對於網站根目錄的相對路徑"也就是以斜槓開頭的形如"/UETest/ueditor/"這樣的路徑。

此外若是你使用的是相對路徑,例如"ueditor/"(相對於圖表1路徑結構)

若是站點中有多個不在同一層級的頁面須要實例化編輯器，且引用了同一UEditor的時候，可能不適用於每一個頁面的編輯器。所以，UEditor提供了針對不一樣頁面的編輯器可單獨配置的根路徑，具體來講，在須要實例化編輯器的頁面最頂部寫上以下代碼便可。

固然，須要令此處的URL等於對應的配置。window.UEDITOR_HOME_URL ="/xxxx/xxxx/";

　　OK，Ueditor在官網上的敘述已經很爲詳細，本博就簡單的做下說明。