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  中的服务器统一请求接口路径  更换为自己写的重定向接口(这个思路是来自于              https://blog.csdn.net/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文件把源码的上传接口换成自己后台的上传接口就好,这里就不展示了)。


版权声明:本文为pact_dr原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。