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

吞吞吐吐的發表於2017-09-06

一、富文字內容互動

1、編輯器內容初始化（即往編輯器中設定富文字）

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

在editor_config.js檔案中找到initialContent引數，設定其值為需要的提示或者問候語即可，如initialContent:’歡迎使用UEditor!’。

 

場景二：編輯舊文章，從資料庫中取出富文字放置到編輯器中。

顯然，編輯文章時需要從後臺資料庫中取出大段富文字，如果仍然採用場景一中的方式去設定初始值的話，必然會帶來諸如引號匹配被截斷等問題，因此需要採用另外一種方式去設定，如下程式碼所示：

1
2
3
<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將成為新的提交表單名稱：

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

3）後端接收程式可以通過如下幾種方式來獲取編輯器中的富文字內容。

1
2
3
4
5
6
7
8
9
10
11
//PHP獲取：
$_POST["myContent"]
     
//JSP獲取：
request.getParameter("myContent");
     
//ASP獲取：
request("myContent");
     
//NET獲取:
context.Request.Form["myContent"];

 

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

該場景適用於站點前端互動較多的場合，需要注意的事項主要是在觸發form提交動作之前執行編輯器內容同步操作。一般的程式碼模式如下所示：    

1
2
3
4
5
//滿足提交條件時同步內容並提交，此處editor為編輯器例項
if(editor.hasContent()){ //此處以非空為例
    editor.sync();       //同步內容
    someForm.submit();   //提交Form
}

此處editor是編輯器例項物件。

 

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

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

 

二、圖片上傳互動

1、傳統圖片上傳

傳統圖片上傳涉及到的前後端互動主要涉及“上傳提交路徑”以及“圖片儲存路徑”兩個引數，後臺儲存路徑以任何形式（絕對或者相對）、在任何頁面展示跟前臺無關。

 

2、Flash圖片上傳

Flahs圖片上傳和傳統圖片上傳存在一個很大的區別：它需要伺服器端實時返回 “圖片儲存路徑”用於在前臺的即時展示。具體到編輯器，就是需要將返回的路徑插入到編輯器中。由此會引出除傳統圖片上傳中提到的兩個引數之外的第三個參 數：“前後端修正路徑”。如果後臺返回的儲存路徑是絕對路徑（指以http開頭的路徑，以根目錄開始的路徑也可勉強歸入其中），那麼前臺無須做任何修正， 否則使用者必須十分清楚自己當前的目錄結構並據此修正這個前後端相對路徑之間的差異。因此，UEditor極力推薦由伺服器端返回以根目錄開始的相對路徑。

 

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

在UEditor中，“上傳提交路徑”和“前後端修正路徑”的配置位於 editor_config.js中。其中，imageUrl引數對應著“上傳提交路徑”，imagePath引數對應著“前後端修正路徑”。而“圖片保 存路徑”則需要在server/upload/php目錄下的imageUp檔案中配置。

路徑配置完成之後，還需要配置imageFieldName引數作為檔案表單的表單名，後臺可以據此獲取檔案控制程式碼。該引數同樣位於editor_config.js中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//圖片上傳提交地址
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”。

 

三、Word圖片轉存互動

1、圖片轉存原理

    所謂word圖片轉存，是指UEditor為了解決使用者從word中複製了一篇圖文混排的文章貼上到編輯器之後，word文章中的圖片資料無法顯示在編輯器中，也無法提交到伺服器上的問題而開發的一個操作簡便的圖片轉存方案。

    該功能的基本操作步驟：複製word文件——》貼上到編輯器——》編輯器 會將所有圖片轉換成一個佔點陣圖，同時在工具欄中高亮轉存按鈕——》點選轉存按鈕彈出圖片上傳框——》點選複製按鈕複製圖片目錄地址——》點選“新增照片” 按鈕，在彈出的選擇框中貼上剛複製的圖片目錄地址——》點選開啟按鈕，選擇目錄下的所有圖片檔案，在此點選開啟——》執行圖片上傳——》上傳成功確認插 入，UEditor將自動完成對應占點陣圖的替換過程。

 

2、配置要點及注意事項

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

 

四、遠端圖片抓取互動

1、遠端抓取原理

    圖片遠端抓取是指在插入本地域名之外的圖片連結地址時，由伺服器將這些外 部圖片抓取到本地伺服器儲存的一個功能。實現原理為在編輯器中向伺服器傳送包含所有外域圖片地址的ajax請求，然後由伺服器在後端抓取儲存後返回圖片地 址給編輯器，再由編輯器完成外域地址和本地地址的替換工作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//是否開啟遠端圖片抓取
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

五、圖片線上管理互動

1、圖片線上管理介紹

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

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

2、注意事項

    圖片線上管理需要配置的引數跟遠端圖片抓取一致，兩者不同的地方是圖片在 線管理中的圖片資料是由伺服器端指定某個目錄，然後遍歷其下的所有圖片檔案得到，然後將地址返回給編輯器，而遠端圖片抓取則是由編輯器提交圖片地址，經過 伺服器端的抓取處理後返回新的地址給編輯器。兩者的初始觸發都需要ajax的介入。

六、螢幕截圖互動

1、螢幕截圖介紹 

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

 

2、注意事項

    需要配置的引數除了跟圖片上傳一樣的內容之外，還多出了伺服器地址和埠的配置。具體使用時請根據自身伺服器的特點做出適應修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//螢幕截圖的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,

七、附件上傳互動

1、附件上傳注意事項

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

相關文章