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,也会提示跨域问题。