在毕设/课设中使用富文本编辑器的实践：以 UEditor 为例（含上传功能实现）

一白科技

于 2025-05-19 12:36:50 发布

阅读量610

点赞数 23

文章标签：课程设计富文本编辑器毕业设计 ueditor springboot

本文链接：https://blog.csdn.net/iceveil/article/details/148060902

版权

在毕设/课设中使用富文本编辑器的实践：以 UEditor 为例（含上传功能实现）

在多数毕业设计与课程设计项目中，常见系统功能如：内容管理、公告发布、在线撰写等，都离不开“富文本编辑器”。但很多学生仅集成了简单的前端编辑器，未实现图片上传功能，导致提交内容空有格式却缺乏实用性。

本文将系统介绍如何在 SpringBoot 项目中集成国产富文本编辑器 UEditor，并完整实现后端图片上传功能，适合对毕业设计有一定技术要求的项目使用。

一、UEditor 简介

UEditor 是由百度开源的富文本编辑器，支持图片上传、视频插入、表格、源码视图等功能。适合搭配 Java Web 项目使用，尤其适合中文使用场景。

二、基本集成流程（前端部分）

1. 下载资源

地址：https://github.com/fex-team/ueditor
解压后将 ueditor 文件夹复制到你的 SpringBoot 项目中：
```
src/main/resources/static/ueditor
```

2. HTML 页面示例

<!-- 引入配置和核心文件 -->
<script src="/ueditor/ueditor.config.js"></script>
<script src="/ueditor/ueditor.all.js"></script>

<!-- 编辑器容器 -->
<script id="editor" name="content" type="text/plain" style="width:100%;height:300px;"></script>

<script>
  var ue = UE.getEditor('editor');
</script>

三、上传功能实现（后端部分）

UEditor 上传功能依赖 ueditor.config.js 中的 serverUrl 字段。我们需要在 SpringBoot 项目中提供对应的上传接口。

1. 创建上传目录

建议统一保存在 /uploads/images/ 路径，并配置访问路径。

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 将 /uploads/ 映射到本地磁盘路径
        registry.addResourceHandler("/uploads/**")
                .addResourceLocations("file:uploads/");
    }
}

2. 创建上传实体类

public class ImageUploadResponse {
    private String state;   // SUCCESS / FAILED
    private String url;     // 返回给前端的访问路径
    private String title;   // 文件名称
    private String original; // 原始文件名
}

3. 控制器接口实现

@RestController
@RequestMapping("/ueditor")
public class UEditorController {

    @PostMapping("/upload")
    public ImageUploadResponse upload(@RequestParam("upfile") MultipartFile file) {
        String uploadDir = "uploads/images/";
        String originalName = file.getOriginalFilename();
        String extension = originalName.substring(originalName.lastIndexOf("."));
        String newFileName = UUID.randomUUID().toString() + extension;

        File dir = new File(uploadDir);
        if (!dir.exists()) dir.mkdirs();

        File savedFile = new File(dir, newFileName);
        try {
            file.transferTo(savedFile);
            ImageUploadResponse response = new ImageUploadResponse();
            response.setState("SUCCESS");
            response.setUrl("/uploads/images/" + newFileName);
            response.setTitle(newFileName);
            response.setOriginal(originalName);
            return response;
        } catch (IOException e) {
            e.printStackTrace();
            ImageUploadResponse response = new ImageUploadResponse();
            response.setState("FAILED");
            return response;
        }
    }

}