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

（Lionden<[email protected]> 轉載說明）　　

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

2012-05-11 16:09:13

一、富文本内容互動

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

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

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

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

顯然，編輯文章時需要從背景資料庫中取出大段富文本，如果仍然采用場景一中的方式去設定初始值的話，必然會帶來諸如引号比對被截斷等問題，是以需要采用另外一種方式去設定，如下代碼所示：

<code><script type=</code><code>"text/plain"</code> <code>id=</code><code>"editor"</code><code>></code>

<code> </code><code>//從資料庫中取出文章内容列印到此處</code>

此處采用了script标簽作為編輯器容器對象，并設定了其類型是純文字，進而在避免了标簽内部JS代碼執行的同時解決了部分同學在使用傳統的textarea标簽作為容器所帶來的一次額外轉碼問題。

2、送出編輯器内容至後端

場景一：在編輯器所在的Form中存在送出按鈕，送出動作由點選此按鈕完成。

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

1) 預設情況下送出到背景的表單名稱是 “editorValue”，在editor_config.js中可以配置，參數名為textarea。

2) 可以在容器标簽（即script标簽）上設定name屬性，以覆寫editor_config.js中的預設配置。執行個體代碼如下，此處的myContent将成為新的送出表單名稱：

<code><form action=</code><code>""</code> <code>method=</code><code>"post"</code><code>></code>

<code> </code><code><script type=</code><code>"text/plain"</code> <code>id=</code><code>"editor"</code> <code>name=</code><code>"myContent"</code><code>></code>

<code> </code><code><input type=</code><code>"submit"</code> <code>name=</code><code>"submit"</code> <code>value=</code><code>"送出"</code><code>></code>

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

<code>//PHP擷取：</code>

<code>$_POST[</code><code>"myContent"</code><code>]</code>

<code>//JSP擷取：</code>

<code>request.getParameter(</code><code>"myContent"</code><code>);</code>

<code>//ASP擷取：</code>

<code>request(</code><code>"myContent"</code><code>);</code>

<code>//NET擷取:</code>

<code>context.Request.Form[</code><code>"myContent"</code><code>];</code>

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

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

<code>//滿足送出條件時同步内容并送出，此處editor為編輯器執行個體</code>

<code>if</code><code>(editor.hasContent()){ </code><code>//此處以非空為例</code>

<code> </code><code>editor.sync(); </code><code>//同步内容</code>

<code> </code><code>someForm.submit(); </code><code>//送出Form</code>

此處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中。

<code>//圖檔上傳送出位址</code>

<code>imageUrl:URL+</code><code>"server/upload/php/imageUp.php"</code><code>,</code>

<code>//圖檔修正位址，引用了fixedImagePath,如有特殊需求，可自行配置 </code>

<code>imagePath:fixedImagePath,</code>

<code>//圖檔描述的key </code>

<code>imageFieldName:</code><code>"upFile"</code><code>,</code>

<code>//等比壓縮的基準，确定maxImageSideLength參數的參照對象.</code>

<code>//0為按照最長邊，1為按照寬度，2為按照高度 </code>

<code>compressSide:0, </code>

<code>//上傳圖檔最大允許的邊長，超過會自動等比縮放,不縮放就設定一個比較大的值</code>

<code>//更多設定在image.html中 </code>

<code>maxImageSideLength:900</code>

完成上述配置之後，理論上背景應該可以接收到前台上傳的圖檔檔案了。在正确儲存之後，傳統圖檔上傳至此就結束了。但是，在使用Flash上傳的編輯器中，流程還遠未結束。

首先，背景需要計算得出圖檔檔案存放的位址字元串。該字元串UEditor極力推薦使用從網站根目錄開始算起，一直到圖檔名結束為止。如果不從網站根目錄開始算起，後面需要考慮“前後端修正位址”參數。

其次，背景傳回一個json格式的字元串，格式具體要求如下：

<code>{ </code><code>"url"</code><code>:</code><code>"圖檔位址"</code><code>, </code><code>"title"</code><code>:</code><code>"圖檔描述"</code><code>, </code><code>"state"</code><code>:</code><code>"上傳狀态"</code> <code>}</code>

其中，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請求，然後由伺服器在後端抓取儲存後傳回圖檔地址給編輯器，再由編輯器完成外域位址和本地位址的替換工作。

<code>//是否開啟遠端圖檔抓取</code>

<code>catchRemoteImageEnable:</code><code>true</code><code>,</code>

<code>//處理遠端圖檔抓取的位址</code>

<code>catcherUrl:URL +</code><code>"server/submit/php/getRemoteImage.php"</code><code>, </code>

<code>//送出到背景遠端圖檔uri合集的表單名</code>

<code>catchFieldName:</code><code>"upFile"</code><code>, </code>

<code>//圖檔修正位址，同imagePath</code>

<code>catcherPath:fixedImagePath,</code>

<code>//本地頂級域名，當開啟遠端圖檔抓取時，除此之外的所有其它域名下的</code>

<code>//圖檔都将被抓取到本地 </code>

<code>localDomain:[</code><code>"baidu.com"</code><code>,</code><code>"10.81.2.114"</code><code>],</code>

2、注意事項

遠端抓取功能是否開啟可在edicot_config.js中通過配置 catchRemoteImageEnable參數實作。與這個功能相關的配置還包括了遠端抓取的處理程式位址，表單域名稱，本地域和“前後端修正地址”。遠端抓取處理程式實作了依據前端送出的位址清單（使用ue_separate_ue标示符進行分隔的字元串）進行圖檔抓取，然後傳回位址清單給客戶端的功能。

前背景互動資料格式樣例：（URL1，URL2，URL3，URL4）

<code>URL1ue_separate_ueURL2ue_separate_ueURL3ue_separate_ueURL4</code>

五、圖檔線上管理互動

1、圖檔線上管理介紹

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

<code>//圖檔線上管理的處理位址 </code>

<code>imageManagerUrl:URL + </code><code>"server/submit/php/imageManager.php"</code><code>,</code>

<code>//圖檔修正位址，同imagePath </code>

<code>imageManagerPath:fixedImagePath</code>

圖檔線上管理需要配置的參數跟遠端圖檔抓取一緻，兩者不同的地方是圖檔在線管理中的圖檔資料是由伺服器端指定某個目錄，然後周遊其下的所有圖檔檔案得到，然後将位址傳回給編輯器，而遠端圖檔抓取則是由編輯器送出圖檔位址，經過伺服器端的抓取處理後傳回新的位址給編輯器。兩者的初始觸發都需要ajax的介入。

六、螢幕截圖互動

1、螢幕截圖介紹

使用了ActiveX控件，目前隻支援IE浏覽器。

需要配置的參數除了跟圖檔上傳一樣的内容之外，還多出了伺服器位址和端口的配置。具體使用時請根據自身伺服器的特點做出适應修改。

<code>snapscreenHost: </code><code>'127.0.0.1'</code><code>, </code>

<code>//螢幕截圖的server端儲存程式，UEditor的範例代碼為“URL </code>

<code>snapscreenServerUrl: URL +</code><code>"server/upload/php/snapImgUp.php"</code><code>, +</code><code>"server/upload/php/snapImgUp.php"</code><code>”</code>

<code>//螢幕截圖的server端端口</code>

<code>snapscreenServerPort: </code><code>80</code><code>, </code>

<code>//截圖的圖檔預設的排版方式 </code>

<code>snapscreenImgAlign: </code><code>'center'</code><code>, </code>

<code>//截圖顯示修正位址 </code>

<code>snapscreenPath: fixedImagePath,</code>

七、附件上傳互動

1、附件上傳注意事項

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

2012-05-11 16:16:57

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

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

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

dialogs：彈出對話框對應的資源和JS檔案

themes：樣式圖檔和樣式檔案

server：涉及到伺服器端操作的PHP、JSP等檔案

third-party：第三方插件

editor_all.js：_src目錄下所有檔案的打封包件

editor_all_min.js：editor_all.js檔案的壓縮版，建議在正式部署時才采用

editor_config.js：編輯器的配置檔案，建議和編輯器執行個體化頁面置于同一目錄

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

圖表 1

第一步：在項目的任一檔案夾中建立一個用于存放UEditor相關資源和檔案的目錄，此處在項目根目錄下建立，起名為ueditor。

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

第三步：為簡單起見，此處将以根目錄下的index.php頁面作為編輯器的執行個體化頁面，用來展示UEditor的完整版效果。在index.php檔案中，首先導入編輯器需要的三個入口檔案，示例代碼如下：

<code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=UTF-8"</code><code>></code>

<code><</code><code>title</code><code>>編輯器完整版執行個體</</code><code>title</code><code>></code>

<code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"ueditor/editor_config.js"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"ueditor/editor_all.js"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>link</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>href</code><code>=</code><code>"ueditor/themes/default/ueditor.css"</code><code>></code>

第四步：然後在index.php檔案中建立編輯器執行個體及其DOM容器。具體代碼示例如下：

<code><</code><code>div</code> <code>id</code><code>=</code><code>"myEditor"</code><code>></</code><code>div</code><code>></code>

<code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code>

<code> </code><code>var editor = new baidu.editor.ui.Editor();</code>

<code> </code><code>editor.render("myEditor");</code>

<code></</code><code>script</code><code>></code>

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

<code>//強烈推薦以這種方式進行絕對路徑配置</code>

<code>URL= window.UEDITOR_HOME_URL||</code><code>"/UETest/ueditor/"</code><code>;</code>

三、注意事項

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在官網上的叙述已經很為詳細，本博就簡單的作下說明。

　　　　　　　　　　　　　　（Lionden<[email protected]> 轉載說明）

本文轉自左正部落格園部落格，原文連結：http://www.cnblogs.com/soundcode/archive/2013/04/11/3015205.html，如需轉載請自行聯系原作者

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

繼續閱讀

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

Cloud Studio初體驗

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

NOSQL安全攻擊

mybatis_入門程式Mybatis入門

JS生成uuid的四種方法

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

php 去掉字元串的最後一個字元及截取原字元串1,2,3,4,5,6,

Effective Java 8:通用程式設計

php——水印

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

layui多任務上傳添加進度條

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method