600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > springboot集成ueditor百度富文本编辑器及上传图片到oss服务器

springboot集成ueditor百度富文本编辑器及上传图片到oss服务器

时间:2020-12-25 11:19:16

相关推荐

springboot集成ueditor百度富文本编辑器及上传图片到oss服务器

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文件把源码的上传接口换成自己后台的上传接口就好,这里就不展示了)。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。