ueditor1.4.3 springmvc圖片上傳

標籤：

ueditor：百度富文字編輯器，地址：ueditor.baidu.com

版本選擇，之所以選擇1.4.3，是因為ueditor 1.4.2才修複在bootstrap環境片拖拽異常，看到1.4.3也修複了不少的bug，沒敢使用1.4.2，稍微看了下源碼，1.4.3裡面很多todo注釋，ueditor一直在改進，不太成熟，既然這麼多bug，為什麼要選ueditor做富文本編輯？這個看項目組大神了，小嘍囉沒法做技術引入，如果有選擇，不太建議用ueditor商用，bug比較多，當然使用簡單也是個有點。

配置使用：

1，需匯入jar包（當然一般項目commons都有）

2，ueditor.config.js

該檔案定義了ueditor的請求入口和toolbar功能，這個檔案對使用來說可以不用修改，想刪除不用的功能的話，修改數組即可

3，ueditor.all.js

ueditor通過getActionUrl擷取路徑，修改這個方法配置圖片上傳路徑

其中getServerName是擷取上下文路徑的js，自行修正路徑

action有

• uploadimage：//執行上傳圖片或的action名稱
• uploadscrawl：//執行上傳塗鴉的action名稱
• uploadvideo：//執行上傳視頻的action名稱
• uploadfile：//controller裡,執行上傳視頻的action名稱
• catchimage：//執行抓取遠程圖片的action名稱
• listimage：//執行列出圖片的action名稱
• listfile：//執行列出檔案的action名稱

具體參見百度文檔：http://fex.baidu.com/ueditor/#qa-customurl

4,congroller.jsp

ueditor請求入口，需要的話，應該可以修改成springmvc 控制器，未測試

5，圖片上傳Controller

public String ueditImageUpload(@RequestParam(value = "upfile", required = false) MultipartFile upfile) {

// 上傳圖片

//返回資料

}

註：返回資料為json串，內容如下：

public class UploaderParam {
    private String name; //通過upfile擷取
    private String originalName; //通過upfile擷取
    private Long size; //通過upfile擷取
    private String state;//成功必須為"SUCCESS"
    private String type; //通過upfile擷取
    private String url; //圖片回顯url

自行拼湊json

6，config.json

項目中圖片儲存在一個靜態資源伺服器，所以這裡設定空首碼，自行修改

7，一切就緒部署上，即可

ueditor1.4.3 springmvc圖片上傳