spring boot整合UEditor,不改源码,真实有效

  UEditor以前在php项目中使用过,是一款非常强大的富文本编辑器,内部实现了各种上传功能,我们甚至不用写任何代码,只需要在所需的项目中正确引入ueditor即可。最近在学习java spring boot框架,项目中也选择这款编辑器。但是配置却出现了很多问题,是我没有想到的。因为用thinkphp5来引用时基本不需要任何配置,引入几个js文件就行了。然而在spring boot 中却没有那么简单,出现了很多问题。于是百度一下:spring boot整合UEditor。发现还是有很多人遇到了和我一样的问题,当然也百度出来很多所谓的正确解决方案。实践下来发现都不太可行,要不是说的太复杂,改各种源码,要不就是乱写一通,骗访问量!这一过程让我浪费了很多时间,最终决定,沉下心来,自己搞!好在顺利完成配置。这里和大家分享一下,希望能帮助到其他人,避免踩坑。

  首先建立一个新的spring boot项目,这里我使用的是idea,完成的项目目录结构如下:

 《spring boot整合UEditor,不改源码,真实有效》

下载UEditor(https://ueditor.baidu.com/website/download.html)1.4.3.3 Jsp 版本 UTF-8版,解压并更名到resources/static/admin目录下面。目录结构如下,这里你要在resources/static/创建一个admin目录存放解压好的ueditor文件,目录结构请务必保持一致。

《spring boot整合UEditor,不改源码,真实有效》

好了现在我们来引入编辑器,首先需要在用到thymeleaf模板引擎和ueditor所需要的依赖包

pom文件中引入的jar包如下(ueditor这个jar包看清楚groupid和版本号不要引错了)

《spring boot整合UEditor,不改源码,真实有效》

在resources/template目录下创建admin目录并新建test.html文件,结构以及代码如下:

《spring boot整合UEditor,不改源码,真实有效》

模板文件建好了,我们来写控制器,在com.exampel包下新建controller包,并创建UeditorController,结构及代码如下:

《spring boot整合UEditor,不改源码,真实有效》

现在来访问:http://localhost:8080/admin/test ,出现如下界面,说明ueditor引入成功。

《spring boot整合UEditor,不改源码,真实有效》

但是问题出现了,我们点击上传按钮却没有任何反应,在浏览器中按F12打开开发者工具发现如下提示:

《spring boot整合UEditor,不改源码,真实有效》

那么我们该如何配置呢?ueditor的配置主要用的以下几个文件:

《spring boot整合UEditor,不改源码,真实有效》

当我们打开http://localhost:8080/admin/test 会发现一个请求,可以判断UEditor向后台的请求要经过controller.jsp,这个请求地址是在ueditor.config.js中配置的,官方文档中也有说明。

《spring boot整合UEditor,不改源码,真实有效》

《spring boot整合UEditor,不改源码,真实有效》

再看看该请求的响应:

《spring boot整合UEditor,不改源码,真实有效》

根据返回的内容,显然,该请求没有正确响应,那么这就是问题的根源所在。为什么会出现这种问题呢?因为这是jsp版本的,而我们使用的是spring boot,请求应该经过控制器,而不能直接去访问这个jsp,你可以发现,当我们直接在浏览器输入这个请求http://localhost:8080/admin/ueditor/jsp/controller.jsp?action=config&&noCache=1540282051992时你会发现,这成了一个下载链接,可以下载contoller.jsp。

我们来看看controller.jsp里面到底有什么:

《spring boot整合UEditor,不改源码,真实有效》

首先你可以看到out.write()这个方法报错了,该方法不存在,这是因为pom文件中没有引入jsp的api,springboot项目中我们使用了thymeleaf模板引擎也用不到jsp。所以这个我们暂时不管。再看看这个rootPath,查阅官方文档和相关资料,原来所有请求经过controller.jsp时都要先加载配置文件config.json,而这个rootPath就是配置文件所在的目录。out.write()就是输出(返回)这个json格式的配置信息。

知道错误原因,那我们开始修改吧!

通过分析我们知道了,spring boot中不能直接将请求发送到这个controller.jsp(请求地址变成了一个下载链接),我们应该新建一个控制器ServerController(一定是新建一个控制器,不能用UEditorController,否则请求路径会加上http:127.0.0.1:8080/admin/config,这样后面肯定会错误,只能是http:127.0.0.1:8080/config,源代码中会根据请求url来获取不同的配置),将controller.jsp中的代码copy过来,并做一些小小的修改,具体代码如下:

《spring boot整合UEditor,不改源码,真实有效》

前面我们知道这个rootPath是指向的是config.json所在的目录(resources/static/admin/ueditor/jsp),spring boot中应该这样修改才能获取的到,然后用PrintWriter来输出json格式的配置信息。那么这个方法就作为了ueditor向服务器发送请求的控制器了,从而取代了controller.jsp的作用,我们就需要去修改ueditor.config.js中配置的服务器统一请求接口路径serverUrl的值来指向这个方法。具体修改如下:

《spring boot整合UEditor,不改源码,真实有效》

server_url    协议://域名:端口   如 http:127.0.0.1:8080

那么serverUrl  server_url+“/config”   http:127.0.0.1:8080/config  就指向了我们控制器中创建的方法,作为服务器统一请求接口

重启项目,再次打开 http://localhost:8080/admin/test, 控制台没有报错,图片上传的按钮也可以点击了。

《spring boot整合UEditor,不改源码,真实有效》

点击图片上传:发现图片可以上传,但是没有正确显示

《spring boot整合UEditor,不改源码,真实有效》

浏览器中按F12查看发现:

《spring boot整合UEditor,不改源码,真实有效》

图片的地址是/ueditor/jsp/upload/image/xxx/xxx.jpg,我们发现这个路径是在在config.json中已经配置好了的:

《spring boot整合UEditor,不改源码,真实有效》

那么自动拼接出来的地址就是http://127.0.0.1:8080/ueditor/jsp/upload/image/xxx/xxx.jpg。我们看看实际上我们的图片被上传到哪里去了:

《spring boot整合UEditor,不改源码,真实有效》

显然这个路径少了前面的/admin/ueditor/jsp,查看ueditor.config.js发现可以配置图片显示地址的前缀,那么这个问题就迎刃而解了,修改ueditor.config.js中imageUrlPrefix的值,同样的多图上传,视频上传等等,也需要在配置中加上前缀,才能正确访问。

《spring boot整合UEditor,不改源码,真实有效》

重启项目,再次打开 http://localhost:8080/admin/test 并上传图片:

《spring boot整合UEditor,不改源码,真实有效》

完美解决!!!

至此,spring boot 配置UEditor就大功告成了,希望能对你有所帮助,如有问题,欢迎评论留言。

写在最后:发博文的时候我真的反复测试可以运行,但依然有小伙伴遇到问题,好吧,那就把源码贴出来吧,

https://coding.net/u/yewen456/p/ueditor/git 希望大家少复制粘贴,能够一步一步来,在遇到问题的时候,能够沉下心来认真去思考。

 

    原文作者:Spring Boot
    原文地址: https://blog.csdn.net/Forever_and_ever/article/details/83307194
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞