首页 >> 大全

springboot整合UEditor编辑器,亲测有效

2023-09-11 大全 36 作者:考证青年

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

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

亲测百度点击器_整合测试_

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

_整合测试_亲测百度点击器

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

_亲测百度点击器_整合测试

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

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

整合测试_亲测百度点击器_

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

整合测试__亲测百度点击器

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

整合测试_亲测百度点击器_

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

整合测试_亲测百度点击器_

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

_亲测百度点击器_整合测试

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

整合测试__亲测百度点击器

亲测百度点击器__整合测试

再看看该请求的响应:

亲测百度点击器__整合测试

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

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

_整合测试_亲测百度点击器

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

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

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

亲测百度点击器_整合测试_

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

_整合测试_亲测百度点击器

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

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

整合测试_亲测百度点击器_

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

整合测试__亲测百度点击器

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

_亲测百度点击器_整合测试

浏览器中按F12查看发现:

亲测百度点击器_整合测试_

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

_亲测百度点击器_整合测试

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

亲测百度点击器__整合测试

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

整合测试_亲测百度点击器_

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

亲测百度点击器__整合测试

完美解决!!!

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

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

希望大家少复制粘贴,能够一步一步来,在遇到问题的时候,能够沉下心来认真去思考。

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了