springboot+UEditor图片上传

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