1、下载ueditor编辑器
2、把下载的ueditor的文件springboot静态资源配置在resources下面
3、引入ueditor的js文件,及实例化
做完以上3点,就可以展示出来编辑器了
4、上传图片到oss服务器
1、先引入jsp/lib下的所有jar包,如果项目中已有的就不必重复添加了。
下面是UEditor依赖的jar包,可以直接使用(1.4.3.3版本)
<!--UEditor依赖的jar包 --><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency><dependency><groupId>commons-codec</groupId><artifactId>commons-codec</artifactId><version>1.9</version></dependency><dependency><groupId>com.blingblingbang</groupId><artifactId>ueditor</artifactId><version>1.1.2</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version></dependency>
2、如果项目中你用的html页面 ueditor/jsp/controller.jsp这个文件报红,在加载ueditor/ueditor.config.js 时调用
服务器统一请求接口路径 serverUrl: URL + "jsp/controller.jsp" 可能会导致
后台配置项返回格式出错,上传功能将不能正常使用!这个错误。
3、所以我自己写了一个接口,让他重定向到 /ueditor/jsp/config.json 这个文件。
把 ueditor/ueditor.config.js 中的服务器统一请求接口路径 更换为自己写的重定向接口(这个思路是来自于/pengdandezhi/article/details/81253904 大家可以看一下)
4、上传到oss服务器
做一个判断,当他上传图片时让他直接访问自己写的上传接口 如下图:
后台接口(这个是上传oss服务器的接口,你们换成自己的就好)
注意的是,返回一定要是一个json格式,里面包含state 和 url
执行完以上步骤,你的ueditor就可以上传成功了。
最后回显的时候注意一下ueditor/ueditor.config.js 的图片访问路径前缀设置为"" 就行。
注意:上传的时候ueditor/ueditor.config.js 里的提交图片的表单名称一定要和后台接口
@RequestParam(value = "upfile", required = false) MultipartFile upfile 名字要一致,不然会获取不到数据。
还有一种方法,不过需要修改源码(修改img.js文件把源码的上传接口换成自己后台的上传接口就好,这里就不展示了)。