項目中需要使用到富文本編輯器，找來找去發現百度UEditor富文本編輯器在國內最為常用因此就嘗試引入。編輯器官網是：http://ueditor.baidu.com/website/index.html ， 開發文檔和js包可以從這里找到。

下面開始介紹開發過程：

引入富文本編輯器UEditor

編輯器js文件引入的靜態目錄

將所有下載好的js包(官方有jsp、php等幾個版本的包，我下載的是jsp的)放入resources目錄下的static下，我在里面建立了個js目錄，下面又搞了個ueditor包用于存放所有編輯器js。

頁面中引入編輯器

新聞詳情

引入相關js文件：

其中/js/ueditor/ueditor.js是我根據官方demo中封裝的一些方法，方便使用而已，可有可無。

測試打開頁面應該已經有了編輯器展示了。

編輯器配置文件修改

為了后續可以上傳等與后臺交互的操作，需要修改下統一配置文件，就是剛引入的ueditor.config.js,

我這里主要改動了兩個地方：

a. 服務器地址

b. 工具項配置

如下：

window.UEDITOR_CONFIG = {

//為編輯器實例添加一個路徑，這個不能被注釋

UEDITOR_HOME_URL: URL

// 服務器統一請求接口路徑

// , serverUrl: URL + "jsp/controller.jsp"

, serverUrl: "http://localhost:8081/admin/imgUpload2"

//工具欄上的所有的功能按鈕和下拉框，可以在new編輯器的實例時選擇自己需要的重新定義

, toolbars: [[

'fullscreen', 'source', '|', 'undo', 'redo', '|',

'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',

'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',

'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',

'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',

'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',

'simpleupload', 'insertimage', 'insertvideo', 'music', 'attachment', 'map', '|',

'horizontal', 'date', 'time', '|',

'print', 'preview', 'searchreplace'

]]

其中serverUrl是服務器地址，這個地址要是錯誤，會使得本地圖片上傳的地方無法使用。而該方法返回的是一組JSON格式的配置。我參照著原來jsp例子中的結果直接返了個JSON：

@RequestMapping(value = "/imgUpload2")

@ResponseBody

public String imgUpload(HttpServletRequest request) {

String config = "{\n" +

"videoMaxSize: 102400000,\n" +

"videoActionName: \"uploadvideo\",\n" +

"fileActionName: \"uploadfile\",\n" +

"fileManagerListPath: \"/ueditor/jsp/upload/file/\",\n" +

"imageCompressBorder: 1600,\n" +

"imageManagerAllowFiles: [\n" +

"\".png\",\n" +

"\".jpg\",\n" +

"\".jpeg\",\n" +

"\".gif\",\n" +

"\".bmp\"\n" +

"],\n" +

"imageManagerListPath: \"/ueditor/jsp/upload/image/\",\n" +

"fileMaxSize: 51200000,\n" +

"fileManagerAllowFiles: [\n" +

"\".png\",\n" +

...

...

json具體參見引入的jsp包下的config.json,原樣返回即可。

有了這個接口，當我們點擊本地圖片上傳控件時，應該就可以彈出文件選擇器，選擇本地圖片了。但是此時選好圖片后，文件實際是上傳不了的，因為我們還得重新寫一個我們自己的圖片上傳接口。

圖片上傳接口及設置

圖片上傳接口代碼：

@RequestMapping(value = "/imgUpload3")

@ResponseBody

public String imgUpload3(MultipartFile upfile) {

String path = this.imgUpload(upfile).getData();

String config =

"{\n" +

" \"state\": \"SUCCESS\",\n" +

" \"url\": \"http://localhost:8081/upload/"+path+"\",\n" +

" \"title\": \"path\",\n" +

" \"original\": \"path\"\n" +

" }";

return config;

}

其中this.imgUpload(upfile).getData()這個方法是之前寫的springboot進行文件上傳的接口，見：http://www.jianshu.com/p/a839637710f9 ， getData方法返回了圖片的路徑，

而這個接口中返回的json格式是官方api中規定的，見官方文檔：http://fex.baidu.com/ueditor/#dev-request_specification 。

好了本地圖片上傳的接口已經寫好了，最后就是設置一下編輯器的上傳圖片請求路徑。

在前端頁面中加入：

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;

UE.Editor.prototype.getActionUrl = function(action) {

if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {

return 'http://localhost:8081/admin/imgUpload3';

} else if (action == 'uploadvideo') {

return 'http://a.b.com/video.php';

} else {

return this._bkGetActionUrl.call(this, action);

}

}

好了，現在應該可以在編輯器中進行完整的圖片上傳了操作了。

總結

以上是生活随笔為你收集整理的themyleaf 图片上传_springboot thymeleaf 整合 百度富文本编辑器UEditor进行图片上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。