themyleaf 图片上传_springboot thymeleaf 整合 百度富文本编辑器UEditor进行图片上传
項(xiàng)目中需要使用到富文本編輯器，找來找去發(fā)現(xiàn)百度UEditor富文本編輯器在國內(nèi)最為常用因此就嘗試引入。編輯器官網(wǎng)是：http://ueditor.baidu.com/website/index.html ， 開發(fā)文檔和js包可以從這里找到。
下面開始介紹開發(fā)過程：
引入富文本編輯器UEditor
編輯器js文件引入的靜態(tài)目錄
將所有下載好的js包(官方有jsp、php等幾個(gè)版本的包，我下載的是jsp的)放入resources目錄下的static下，我在里面建立了個(gè)js目錄，下面又搞了個(gè)ueditor包用于存放所有編輯器js。
頁面中引入編輯器
新聞詳情
引入相關(guān)js文件：
其中/js/ueditor/ueditor.js是我根據(jù)官方demo中封裝的一些方法，方便使用而已，可有可無。
測試打開頁面應(yīng)該已經(jīng)有了編輯器展示了。
編輯器配置文件修改
為了后續(xù)可以上傳等與后臺(tái)交互的操作，需要修改下統(tǒng)一配置文件，就是剛引入的ueditor.config.js,
我這里主要改動(dòng)了兩個(gè)地方：
a. 服務(wù)器地址
b. 工具項(xiàng)配置
如下：
window.UEDITOR_CONFIG = {
//為編輯器實(shí)例添加一個(gè)路徑，這個(gè)不能被注釋
UEDITOR_HOME_URL: URL
// 服務(wù)器統(tǒng)一請求接口路徑
// , serverUrl: URL + "jsp/controller.jsp"
, serverUrl: "http://localhost:8081/admin/imgUpload2"
//工具欄上的所有的功能按鈕和下拉框，可以在new編輯器的實(shí)例時(shí)選擇自己需要的重新定義
, 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是服務(wù)器地址，這個(gè)地址要是錯(cuò)誤，會(huì)使得本地圖片上傳的地方無法使用。而該方法返回的是一組JSON格式的配置。我參照著原來jsp例子中的結(jié)果直接返了個(gè)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,原樣返回即可。
有了這個(gè)接口，當(dāng)我們點(diǎn)擊本地圖片上傳控件時(shí)，應(yīng)該就可以彈出文件選擇器，選擇本地圖片了。但是此時(shí)選好圖片后，文件實(shí)際是上傳不了的，因?yàn)槲覀冞€得重新寫一個(gè)我們自己的圖片上傳接口。
圖片上傳接口及設(shè)置
圖片上傳接口代碼：
@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()這個(gè)方法是之前寫的springboot進(jìn)行文件上傳的接口，見：http://www.jianshu.com/p/a839637710f9 ， getData方法返回了圖片的路徑，
而這個(gè)接口中返回的json格式是官方api中規(guī)定的，見官方文檔：http://fex.baidu.com/ueditor/#dev-request_specification 。
好了本地圖片上傳的接口已經(jīng)寫好了，最后就是設(shè)置一下編輯器的上傳圖片請求路徑。
在前端頁面中加入：
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);
}
}
好了，現(xiàn)在應(yīng)該可以在編輯器中進(jìn)行完整的圖片上傳了操作了。
總結(jié)
以上是生活随笔為你收集整理的themyleaf 图片上传_springboot thymeleaf 整合 百度富文本编辑器UEditor进行图片上传的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 信息学奥赛一本通 提高篇 第六部分 数学
- 下一篇： 中国电子学会scratch等级考试三级