1、首先第一步去到http://ueditor.baidu.com/website/download.html下載並解壓

2、建立一個專案工程，在jsp檔案中引入Ueditor相關的js檔案

3、在ueditor資料夾下配置config.json檔案，其中百度編輯器主要的配置項是 UrlPrefix 和 PathFormat 這兩項：

1）、圖片上傳：imagePathFormat、imageUrlPrefix

2）、塗鴉上傳：scrawlPathFormat、scrawlUrlPrefix

 3）、截圖上傳：snapscreenPathFormat、snapscreenUrlPrefix

   4）、附件上傳：filePathFormat、fileUrlPrefix

   5）、視訊上傳：videoPathFormat、videoUrlPrefix

4、ImagePathFormat 的介紹

      作用：指定檔案上傳路徑和返回路徑，支援格式化。

例如，假設網站根目錄是："C://apache/temp/"，以下是 imagePathFormat 的配置值以及對應的存放目錄。

"/upload/{filename}" --> "C://apache/temp/upload/"

"upload/{filename}" --> "C://apache/temp/upload/"

"./upload/{filename}" --> "C://apache/temp/upload/"

5、指定檔案儲存目錄：上傳路徑可以使用絕對路徑和相對路徑，推薦使用絕對路徑的配置。

1)、使用“/”開頭的根路徑

imagePathFormat引數推薦使用“/”開頭的配置，這樣的值對於網站根目錄的位置。

例子：網站根目錄是“C://apache/temp”,imagePathFormat引數設定為“/upload/image/{filename}”,那麼上傳的位置在“C://apache/temp/upload/image/”的目錄下

2）、使用非“/”開頭的相對路徑

imagePathFormat引數使用非 “/”開頭的相對路徑時，上傳位置也是相對於網站根目錄。

例如：網站根目錄是“C://apache/temp/”,imagePathFormat 引數設定為 “../upload/{filename}”,那麼上傳位置在“C://apache/upload/”目錄下。

6、ImageUrlPrefix 的介紹

作用：指定圖片訪問路徑的字首

1)、使用相對路徑時

"imageUrlPrefix"：“/專案名稱”

2)、使用絕對路徑時

“imageUrlPrefix”："http://localhost:8080/專案名稱"，其中其中localhost可以修改為對應的伺服器地址

7、修改ueditor-config.js

(function () {

    var URL = window.UEDITOR_HOME_URL || "/專案名稱/ueditor的資料夾在專案中的位置/";

 window.UEDITOR_CONFIG = {

        //為編輯器例項新增一個路徑，這個不能被註釋
        UEDITOR_HOME_URL:URL
        
        // 伺服器統一請求介面路徑
        , serverUrl: URL + "jsp/controller.jsp"

8、可能會出現問題的地方：

"imagePathFormat"這個屬性要注意，可以使用預設的路徑，但是使用預設的路徑時可能出現了一個問題，

一開始我找不到我上傳的圖片在哪裡，後來發現是在tomcat的webapps資料夾下的專案中，

但是找到位置之後，我上傳了圖片，第二天開啟電腦發現圖片都不顯示了，資料夾下圖片都空了，

原因是因為tomcat重啟的時候會將這些臨時檔案都清空，所以就沒有了，那怎麼辦呢？

於是我就修改了這個地址將圖片上傳到和專案檔案平行的資料夾下，

比如：

"imagePathFormat": "/../temp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */

這樣做，圖片就不會被刪除了。

9、完整的使用例子

例：假設例子情況如下

網站根目錄：“C://apache/temp/”

上傳檔名稱是：“圖片.jpg”

上傳日期是：2018年01月10日

配置項imagePathFormat和imageUrlPrefix的值為：

imagePathFormat:"/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"

imageUrlPrefix：“http://localhost:8080/專案名稱”

那麼上傳的結果可能是這樣的：

上傳檔名為：a.jpg

檔案上傳到：“C://apache/temp/upload/image/20180110/”目錄下

後端返回給前端的圖片連結為：

“/upload/image/20180110/a.jpg”

插入到編輯器的圖片連結為：

“http://localhost:8080/專案名稱/upload/image/20180110/a.jpg”