springboot学习日志之DAY06thymeleaf整合UEditor图片上传问题

最新推荐文章于 2022-12-04 19:03:35 发布

光滑的秃头

最新推荐文章于 2022-12-04 19:03:35 发布

阅读量502

点赞数

分类专栏： SpringBoot 学习日志 JAVA

转载请注明出处 https://www.hjljy.cn

本文链接：https://blog.csdn.net/ycf921244819/article/details/84786106

版权

学习日志同时被 3 个专栏收录

66 篇文章 1 订阅

订阅专栏

JAVA

48 篇文章 0 订阅

订阅专栏

SpringBoot

38 篇文章 2 订阅

订阅专栏

什么是UEditor富文本编辑器

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

springboot整合Ueditor

获取UEditor插件

在百度UEditor官方网站获取到对应的插件：https://ueditor.baidu.com/website/index.html

选择JSP版本的1.4.3进行下载，将下载后的文件解压放到springboot工程的static下面，如下图所示。

为了方便测试，我直接在static下面创建一个demo.html，如果想通过controller进行跳转就写一个controller跳转到templates下面的html文件就行了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UEditorDEMO</title>
</head>
<body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
<!-- 配置文件 -->
<script type="text/javascript" src="plugin/utf8-jsp/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="plugin/utf8-jsp/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container');
</script>
</body>
</html>

在浏览器上打开效果如下：

但是点击上传图片按钮提示：后端配置项没有正常加载，上传插件不能正常使用

图片上传问题处理

在网上找了很多资料，在最后选择了修改源码的方式：https://blog.csdn.net/qq_33745799/article/details/70031641

根据上面的博客的内容进行操作，中途还是遇到很多的问题，不过最后还是成功了。

记录下需要注意的几个点：

第一点 ueditor.config.js 当中

这里的serverUrl就是初始化上传功能时发出的请求，默认是转到如下所示

第二点需要添加对应的lib包到工程当中：

将jsp目录下的lib包里面的jar全部添加到工程当中。

第三点 jsp下面config.json

保证可以访问到这个文件，并且这个文件当中里面需要进行相关的配置：如下所示

上传图片成功但是不显示图片，就要通过F12看看图片的访问路径是否有问题，然后配置相关项。

光滑的秃头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
springboot学习日志之DAY06thymeleaf整合UEditor图片上传问题

什么是UEditor富文本编辑器UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。springboot整合Ueditor 获取UEditor插件在百度UEditor官方网站获取到对应的插件：https://ueditor.baidu.com/website/index.htm...
复制链接

扫一扫