ueditor上传图片回调_springboot+mybatis+oss整合ueditor

今天项目的管理后台需要用到编辑器，之前有用到一款编辑器，叫做wangEditor,这款编辑器虽然接入是很快，给我的感觉就是傻白甜，但是他的编辑器的功能是比较少，后面又将编辑器改成了百度的ueditor，这块编辑器功能比较齐全（个人感觉），但是在接入的时候遇到了许多坑，看了官网的例子，但接入的过程还是有点坎坷，所以在此记录一下；

下载路径：http://ueditor.baidu.com/website/download.html

接入：我下载的是下图的版本：

首先按照文档进行接入

1：在项目中引入文档的js

<!-- 配置文件 --><script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 --><script type="text/javascript" src="ueditor.all.js"></script>

这里需要留一下，当出现语言类型的错误，就需要引入下面的js,否则就只需要引入上面的两个js;

<script th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>

2:根据demo我们需要定义一个编辑器的容器，用来展示编辑器，然后我们在js里面实例化这个编辑器：

• 定义容器

<div id="editor" class="layui-form-item" lay-verify="editor" style="width: 600px">
</div>

• 实例化编辑器，注意：这里如果ue.getEditor方法报错，很有可能是因为js文件没有引入成功，需要看看是不是拦截器把上面的两个js文件拦截了

当执行完上述步骤，如果访问页面能够正常看到下图，则说明接入编辑器已经成功了90%；

但是不要高兴太早，因为编辑器是不能缺少图片上传功能，当我们点击图片上传，这时候会发现在提示我们后端配置项没有正常加载，上传插件不能正常使用（如下图），这个时候我们需要配置一番

配置

1. 1:打开ueditor文件夹下面的jsp,里面有个lib文件夹，这个里面有些jar包，如下图

1. 2:我们只需要引入下面的坐标即可，如果项目中存在，无需再引

<!--UEditor依赖的jar包 -->

1. <dependency>
2. <groupId>commons-fileupload</groupId>
3. <artifactId>commons-fileupload</artifactId>
4. <version>1.3.1</version>
5. </dependency>
6. <dependency>
7. <groupId>commons-codec</groupId>
8. <artifactId>commons-codec</artifactId>
9. <version>1.9</version>
10. </dependency>
11. <dependency>
12. <groupId>com.blingblingbang</groupId>
13. <artifactId>ueditor</artifactId>
14. <version>1.1.2</version>
15. </dependency>
16. <dependency>
17. <groupId>commons-io</groupId>
18. <artifactId>commons-io</artifactId>
19. <version>2.4</version>
20. </dependency>

这个时候我们需要打开/ueditor/jsp/controller.jsp，确认out.write是不是报错了，如果报错了，就说明jar包引的没有问题否则需要重新确认；

然后我们需要重新写一个接口，让他重定向到 /ueditor/jsp/config.json 这个文件。把 ueditor/ueditor.config.js 中的服务器统一请求接口路径 更换为自己写的重定向接口（至于位为啥要这样，可以看看https://blog.csdn.net/pengdandezhi/article/details/81253904）；

打开/ueditor/ueditor.config.js，编辑serverUrl，将刚刚重写的接口路径写进去；

上传文件到oss

首先我们在页面实例化完成编辑器，还要做一个判断，当它上传图片时让它直接访问自己写的上传接口 如下图：

上图uEditorUploadFile是oss文件上传的接口，需要后台自己定义

这里要注意：file这个参数名称是要在/ueditor/jsp/config.json里面配置的，如下图

上图注释出来的一个是接口接受的文件参数名称，另一个图片回显的访问路径前缀

访问路径前缀之所以是"",是因为oss将图片上传上去以后是全路径访问，不需要配置什么，所以这里就是"";

最后就可以尽情的使用编辑器了

最后我们要注意一下：在ueditor.all.js 24518行要注意这两行，第一个：oss文件上传接口需要返回json,参数名称为state,url；第二个：需要按照第二个框起来的地方去改，其中删除domUtils.removeClasses下面的代码，然后加入me.execCommand();不然上传图片可能会出现上传错误；

最后：需要注意：可能会出现上传图片的顺序会出现顺序被打乱的现象，跟设置宽高；这个可以自行百度；

end