springboot+UEDitor百度編輯器整合圖片上記錄於此
1、下載ueditor插件包,解壓到static/ueditor目錄下
2、在你所需實現編輯器的頁面引用三個JS文件
1) ueditor.config.js 2) ueditor.all.min.js 3)zh-cn.js
th:utext回顯富文本內容
<textarea id="container" name="content" th:utext="${xxx}" type="text/plain" style="width:800px;height:400px;">
</textarea>
初始化富文本編輯器
UE.getEditor('container');
這一步沒有問題的話,頁面上應該看到富文本編輯器了,但控制台會提示配置錯誤,接下來配置富文本參數值
3、找到ueditor.config.js配置文件serverUrl的參數,設置成你項目的請求路徑,后面上傳圖片的請求路徑也是這個!!!
只不過一個是post請求一個是get請求。
serverUrl默認在初始化富文本編輯器的時候會以get方式請求該地址,所以我們需要在該請求方法中返回它的默認配置文件。
redirect:/js/ueditor/jsp/config.json
toolbars設置常用富文本編輯器的工具,比如
'fullscreen', '|', 'undo', 'redo', '|','fontfamily', 'fontsize', '|','justifyleft', 'justifycenter', 'justifyright', 'justifyjustify','simpleupload'
4、經過第三步之后,uditor就找到了config.json配置文件。這時候就可以上傳圖片,但是還不能回顯圖片,因為上傳圖片
成功后返回的數據格式不符合它的要求,回顯圖片還需要在config.json中配置獲取圖片的路徑參數
5、上傳圖片,以MultipartFile對象來接收圖片信息。經過上傳的邏輯之后,返回json字符串。格式如下:
Map<String,Object> map = new HashMap<String,Object>() ;
map.put("state", "SUCCESS") ;
map.put("original", file.getOriginalFilename()) ;
map.put("size", file.getSize()) ;
map.put("title", file.getOriginalFilename()) ;
map.put("type", xxx) ; //圖片類型
map.put("url", fileName) ;
ObjectMapper mapper = new ObjectMapper();
return mapper.writeValueAsString(map);
6、在onfig.json配置文件中設置獲取圖片的路徑,找到imageUrlPrefix參數,比如你的圖片上傳到static目錄的upload下,
http://192.168.0.105:8080/xxx/upload/
后面遇到配置serverUrl參數問題,該參數配置的服務地址,需與所訪問的服務網址保持一致,如果是用localhost訪問服務,但serverUrl配置的是本機IP,也會提示跨域問題。