对于idea在sping boot项目中配置Ueditor富文本编辑器图片上传的详细过程(Jsp版本)

最新推荐文章于 2024-04-23 15:23:56 发布

Вlǐss

最新推荐文章于 2024-04-23 15:23:56 发布

阅读量581

点赞数 4

分类专栏：前端开发文章标签： java spring jsp html

本文链接：https://blog.csdn.net/weixin_42205296/article/details/108410008

版权

本文详细介绍了在Spring Boot项目中集成UEditor富文本编辑器并配置图片上传的功能。首先调整项目结构，将UEditor文件放入static文件夹，然后在HTML页面引入资源并实例化编辑器。接着，解决UTF-8编码问题，配置后端依赖，并重写控制器处理图片上传请求。最后，调整ueditor.config.js和config.json配置文件，完成图片上传功能。

摘要由CSDN通过智能技术生成

在配置之前，首先要弄清楚项目结构，我的项目结构如下：

resource下面有两个文件夹，public文件夹下存放的是html文件，static文件夹下存放的是各种前端静态资源文件，该项目已经配置好了UE富文本编辑器，因此在static文件夹下会存在UEditor文件夹。
1.下载UEditor富文本编辑器安装包，解压后文件夹下有如图所示的文件：
在这里插入图片描述
自己下载的安装文件夹可与上图进行对比。

2.将富文本编辑器的安装文件夹放入项目目录static下：
在这里插入图片描述
3.在需要富文本编辑器的页面引入富文本资源文件：

在html页面上写入编辑器：

在js文件中实例化编辑器，注意要将该js文件引入html文件中去：

此时运行项目，页面出现下图所示的界面，表示初步配置成功；
在这里插入图片描述
如果在图中出现乱码，注意将html代码的编码方式改为gb2312，经常写的是utf-8;如果没出现乱码则不用改，写成utf-8即可。

此时界面中上传图片功能是不可用的，按F12会发现“后端配置不正确，上传功能无法使用”的报错信息。
下面开始配置后端图片上传功能。
4.在pom文件中加入依赖项：

<!--Ueditor -->
        <dependency>
            <groupId>cn.songxinqiang</groupId>
            <artifactId>com.baidu.ueditor</artifactId>
            <version>1.1.2-offical</version>
        </dependency>

        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3</version>
        </dependency>

5.重写jsp控制器。因为ue自带的控制器在idea中无法读取到jsp文件夹下的配置文件，因此要对jsp控制器进行重写；在main/java/下任意的文件夹新建java文件，文件名为controller;
在这里插入图片描述
controller的代码如下，该代码将上传视频的接口已经写在了里面，但不在做说明，看注释即可：

package cn.btks.news.controller;

import com.alibaba.fastjson.JSON;
import lombok.Data;
import org.springframework.boot.autoconfigure.domain.EntityScan;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.