springboot整合ueditor有源码

在项目用到ueditor插件来编辑信息,初次接触,遇到各种问题,到目前为止,也只是基本实现了功能,简单记录一下过程,希望对初次使用ueditor的朋友们有所帮助。

ueditor就不介绍了,或对ueditor还不了解的朋友请先百度,看看资料…

整合过程不难,看明白思路大家都会做。

如果是vue项目的整合,去看这篇:vue项目整合UEditor看这一篇就够了

1、ueditor

https://github.com/fex-team/ueditor

ueditor的代码是jsp页面,这里我以springBoot+thymeleaf为例说明,把ueditor整合到我这个项目中,后面我会给出demo的github地址。

这是下载下来的内容
在这里插入图片描述
ueditor只提供了jsp的引用,并没有html的用法,都没有关系,jsp的内容可以用controller来替换。

ueditor.config.js是配置文件,我们最后要修改请求路径,就是在这个文件里

config.json 是配置文件,定义了图片的大小格式等相关信息

2、现在整理一下我们的需求?

  • 第一:要上传的图片在页面显示
  • 第二:将一切对图片的上传处理都交给我们自定义的controller来做
  • 第三:上传的图片我们可能会保存到阿里云或其他服务器,并给ueditor传回地址,怎么实现?

3、实现过程分析

看代码会发现,ueditor插件有他自己的控制,图片保存的路径,图片请求的控制器,路径都需要修改;

修改完图片的请求路径以后会发现页面控制台报错,找不到映射。

原因就是官网的demo是jsp示例,修改了请求路径之后就找不到config.json;

解决: 我在这里将config.json放在了springboot的resource中,但是找不到;

通过路径都能获取到文件,但ueditor取不到,不知道为什么!

config.json最终也是要给ueditor.config.js中使用的,没有config.json的配置,图片提交出错;

所以就将config.json中的配置信息复制到ueditor.config.js中,就解决了问题。

上传图片,修改了配置文件以后,上传图片就可以请求到自定义的控制器, 最后图片要在页面显示需要回传地址,此时在controller中通过一个map封装信息,返回到页面即可。

思路就是这样,希望可以帮助到你,如果还有问题,@我给你发demo源码

不会,我可以学;落后,我可以追赶;跌倒,我可以站起来!我一定行!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

峰晨朴朴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值