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

什么是UEditor富文本编辑器

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

springboot整合Ueditor

  1. 获取UEditor插件

在百度UEditor官方网站获取到对应的插件:GitHub - fex-team/ueditor: rich text 富文本编辑器

选择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>
复制代码

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

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

图片上传问题处理

在网上找了很多资料,在最后选择了修改源码的方式:很详细的SpringBoot整合UEditor教程_小宝的博客-CSDN博客

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

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

第一点 ueditor.config.js  当中

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

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

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

第三点 jsp下面config.json

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

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

猜你喜欢

转载自juejin.im/post/7031058109170728974