史上最详细springboot vue UEditor整合（包括遇到的各种坑）

Vue中引入UEditor看这篇教程https://blog.csdn.net/kshon/article/details/102667318

接下来说说springboot中配置UEditor遇到的各种坑

1、将UEditor中目录下的config.json文件复制resource下

2、在Vue中配置后端接口

Ueditor初始化时会向serverUrl发送一条请求，格式如下，以获取上面的config.json配置

3、引入ueditor相关的jar包，springboot用maven引入比较好

        <dependency><groupId>com.blingblingbang</groupId><artifactId>ueditor</artifactId><version>1.1.2</version></dependency>

4、创建一个controller，以返回config.json配置，这个必须参照UEditor/jsp/controller.jsp

controller.jsp的内容如下，其实就是返回config.json

后端Controller的代码：

5、接下来运行测试，打开控制台发现没报错，但并不代表你的config就配置正确了

在浏览器中访问上面的地址http://localhost:820/config?action=config&callback=bd__editor__rcws22，返回的是

虽然看不懂，但明显不是config.json中的内容，所以说你并没有配置成功，那么我们上传照片测试一下

发现报错了：ueditor.all.js?2a41:24557 Uncaught ReferenceError: errorHandler is not defined

点进ueditor.all.js查看报错位置（注意：用ueditor.all.min.js查看是没有注释的，所以自己更换成ueditor.all.js再查看）

意思很明显了，你的后端配置没有成功

可是从刚刚的Controller来看，已经读到了config/config.json文件了，那是哪里出错了呢？

仔细看代码会发现有一个new ActionEnter( request, path ).exec()，我们点进去查看里面的源代码，看看是不是修改了路径

ActionEnter的构造方法中，将刚刚读到的资源路径作为参数去获取ConfigManager实例了，我们继续看ConfigManager的getInstance方法

上面的request.getRequestURI()获取的是访问路径http://localhost:820/config?action=config&callback=bd__editor__rcws22中除去前缀的uri，也就是/config，他作为uri传递到ConfigManager类的构造方法中，并且还与根目录相加！就是说现在originalPath的值是“classes/config/config.json/config”

接着我们看看在initEnv（）方法中的逻辑，可以看到他先获取的originalPath的

父目录（classes/config/config.json），然后再调用getConfigPath（）方法

再查看getConfigPath方法，可以发现他用父目录+config.json，所以现在整个文件地址就变成了

classes\config\config.json\config.json

如果你不信的话，可以在Controller中自己打印看看，添加几条语句，其实就是上面两个类的处理逻辑

现在你重新上传图片试试，看看看控制台的打印

重点：所以我们知道问题出在哪里的，UEditor会自动帮我们添加config.json，所以我们只要定位到他的父目录就行了，修改Controller的代码为

6、这样还没完，现在可以访问 http://localhost:820/config?action=config&callback=bd__editor__b7e248获取config.json的内容了，但是我们还是无法上传图片，为什么呢，因为我们这个controller只能在初始化时测试接口是否正确，还没有写接收图片的代码，我们研究一下config.json的代码，可以发现三个比较重要的参数

imageActionName：上传图片时的action名称，上面测试时url中的参数是action=config，如果上传图片时会变成action=ueditorImage，在这里我们就可以通过action的名字去判断并进行路由转发了，从而实现上传图片、视频等

imageUrlPrefix：路由前缀，也就是http://ip地址：端口号/项目名

imagePathFormat：保存路径的格式

6、解决了config.json的坑，还没有完成图片上传的完整功能（网上的文章大多数都到此为止，没有给出图片上传的具体思路）

上面说了，初始化时的请求是http://localhost:820/config?action=config&callback=bd__editor__nbzdeo，而上传图片时的请求是

http://localhost:820/config?action=ueditorImage，当然这个是post请求，他还附带了一个文件，可以看到两个请求中的action值不同，其中的action值是通过config.json中的imageActionName配置的，那我们就可以通过判断action的值去决定是返回config.json还是上传图片，甚至是上传视频等等

修改Controller：

上面通过一个参数MultipartFile upfile去接收上传的文件，这里又要注意了，这个upfile名称是根据config.json中imageFieldName属性配置的，一定要一致，否则不会自动注入，那么你接收的文件就是null

上面的controller用到了一个自己写的上传图片的工具类UEditorUpload，这里给出完整代码

@Component
public class UEditorUpload {@Value("imgUrl")private  String URL;private Log log = LogFactory.getLog(UEditorUpload.class);private String path = ClassUtils.getDefaultClassLoader().getResource("").getPath();public UEditorFile uploadImage(MultipartFile file) throws IOException {log.info("UEditor开始上传文件");String fileName = file.getOriginalFilename();  //获取文件名//Ueditor的config.json规定的返回路径格式String returnPath = "/image/ueditor/"+new Date().getTime()+"/"+fileName;   File saveFile = new File(path+"static"+returnPath);if (!saveFile.exists()){saveFile.mkdirs();}file.transferTo(saveFile);  //将临时文件移动到保存路径log.info("UEditor上传文件成功，保存路径："+saveFile.getAbsolutePath());UEditorFile uEditorFile = new UEditorFile();uEditorFile.setState("SUCCESS");uEditorFile.setUrl(returnPath);  //访问URLuEditorFile.setTitle(fileName);uEditorFile.setOriginal(fileName);return uEditorFile;}
}

其中UEditorFile是一个javaBean

//我使用的是lombok，没有这个查看的同学自行添加getter/setter方法
@Data
public class UEditorFile {private String state;private String url;private String title;private String original;
}

注意上面的这个参数是按照官网给出的规范来写的

要注意的点是返回路径是按照config.json中的imagePathFormat格式来写的，{time}代表时间戳，{filename}代表图片名称，其返回url必须是按照这个格式，然后Ueditor会根据imageUrlPrefix+imagePathFormat去拼接得到最后的图片访问路径

接下来重新上传图片

发现他报错说请求希望得到MIME的json格式，可是我们返回的UEditorFile 对象会自动转换为json呀，其实他是希望得到一个json字符串，好，那我们修改Controller，返回一个json字符串

这时候再去上传图片你会发现单图上传总是失败，但是后台又打印日志说已经上传成功，并且如果你选择多图片上传却能成功！

这到底是为什么呢？带着疑问，我们要进入ueditor.all.js中查看源码，打印错误日志才行，我们首先想到的是查找关键词，那么关键词从哪来呢，当然是conifg.json的配置项，我们知道既然能上传成功但又无法显示，那很有可能是访问不到，甚至是可怕的跨域问题，所以这里的关键词一定是跟访问路径有关的，我们搜索imageUrlPrefix

发现有一个回调方法，里面写着imageUrlPrefix+json.url，这个json.url明显就是我们后端返回来的url，所以这里是拼接图片访问地址的地方，我们在下面的catch中打印日志

然后重新进行单图上传，查看控制台

看到关键词了吗？cross-origin，哦嚯，完蛋，真的是跨域问题，因为我的vue项目使用8080端口，但是springboot使用820端口，而ueditor使用的是iframe，所以出现跨域问题，我们去官网查看解决办法

http://fex.baidu.com/ueditor/#dev-crossdomain，拉到最底下

史上最详细springboot vue UEditor整合（包括遇到的各种坑）相关推荐

android项目实战博学谷源码_Vue框架：史上最详细的Vue实战项目之喵喵电影（视频+源码）...
Vue是web前端中重要的框架之一,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计,Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.所以,对于web前端开 ...
史上最详细的SSM框架整合(Spring、SpringMVC、Mybatis)
毫无疑问我们肯定是使用Spring去整合SpringMVC和Mybatis,在整合过程中我们首先要让各自的模块实现,然后再去使用Spring整合:比如我先实现Mybatis框架的配置,然后再通过测试看 ...
idea 多模块build_[史上最详细]springboot创建基于maven的多模块项目
点击蓝字关注我们背景项目为什么需要用多模块?springmvc难道还不够我们平常使用吗? 设计模式真言:"高内聚.低耦合",springmvc项目,一般会把项目分成多个包:c ...
史上最详细的IDEA优雅整合Maven+SSM框架（详细思路+附带源码）
https://blog.csdn.net/qq_44543508/article/details/100192558
史上最详细阿里云服务器上Docker部署War包项目实战每一步都带详细图解！！！
史上最详细阿里云服务器上Docker部署War包项目实战每一步都带详细图解!!! 部署jar 包方式: https://blog.csdn.net/weixin_45821811/article/d ...
GitChat·大数据 | 史上最详细的Hadoop环境搭建
GitChat 作者:鸣宇淳原文: 史上最详细的Hadoop环境搭建关注公众号:GitChat 技术杂谈,一本正经的讲技术 [不要错过文末彩蛋] 前言 Hadoop在大数据技术体系中的地位至关重要 ...
史上最详细的微生物扩增子数据库整理
声明:文件所有链接内容来自"生信控"公众号,已经获作者向屿授权. 本人对每个数据库的使用目的和经验配导读,需要使用的小伙伴读点击链接跳转原文学习. "生信控"相 ...
史上最详细版Centos6安装详细教程
镜像CentOS-6.8-x86_64-bin-DVD1.ISO 将下载好的镜像上传到服务器,并选择该镜像(详情请看上篇exsi镜像上传文章) 一.安装开始开机选择第一项这里询问我们是否要对光盘进 ...
史上最详细“截图”搭建Hexo博客——For Windows
http://angelen.me/2015/01/23/2015-01-23-%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86%E2%80%9C%E6%88 ...

史上最详细springboot vue UEditor整合（包括遇到的各种坑）

史上最详细springboot vue UEditor整合（包括遇到的各种坑）相关推荐

最新文章

热门文章