UEditor在前后端分离项目中的使用

UEditor,在前后端分离的项目中的使用

前端，vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建;
后端，springboot+spring+springmvc+spring serurity+mybatis+maven+redis+nacos的方式来构建项目框架和管理，提供给前端restful风格的接口;

前端vue项目使用Ueditor富文本编辑器
vue中集成UEditor

提别提示:前端刚刚集成富文本时,加载富文本时,console控制台会提示上传错误,特别声明一点是因为需要与后端部分配合使用,前端需要将配置ueditor.config.js 里的serverUrl的前缀改陈你自己的后端访问的请求路径地址，文件上传的后端部分;

UEditor作为国内开源的富文本编辑器，有百度的强大技术支持，整体来说是不错的选择，百度也提供了php、asp、.net、jsp的版本.所以集成起来相对来说更加容易，只需要按照文档的方式将前端集成进去，然后后端拿到源码之后，针对文件上传的类修改最终存储的方法即可将文件等上传到本身的服务器了。

由于采用前后端分离的方式,必然就会有新的坑,特别时vue+elementui方式,下面开始讲解实现流程

1:下载UEditor的jsp版本包,下载解压后得到一个ueditor1_4_3_3-utf8-jsp的文件夹,里面内容如下

这里将jsp目录下的lib目中的ueditor.jar文件中的所有类全部拿出来 ,放到后端项目中，然后在control层新建一个UeditorController.java的类，如下：这里将jsp目录下的lib目中的ueditor.jar文件中的所有类全部拿出来,放到后端项目中，然后在control层新建一个UeditorController.java的类，如下：

该类主要处理，ueditor与后端服务器的交互，通过action=’'不同的类型来处理，其中action=config为加载配置项，action=uploadImg 图片上传，在ActionEntor类中，你可以根据不同的请求类型来处理；
处理当action=config时的情况，保证前端的编辑器各项文件上传功能，能够正常使用。

3: 然后将jsp下面的config,json文件放到工程类路径下,并修改ConfigManage.java类

这样ueditor在初始化能够正确的加载配置文件。此时，修改前端项目中ueditor.config.js中的serverUrl的值为:

4:在ActionEnter.java类中,查看如下代码后的文件上传的处理，根据自身的上传方式和文件服务器选择适合自己的方式：