富文本编辑器Ueditor实战（三）-springboot集成

最新推荐文章于 2024-04-01 09:48:57 发布

夜郎king

最新推荐文章于 2024-04-01 09:48:57 发布

阅读量2w

点赞数

分类专栏： js javaEE 工作拾遗文章标签： spring boot ueditor 富文本编辑器

本文链接：https://blog.csdn.net/yelangkingwuzuhu/article/details/122558638

版权

工作拾遗同时被 3 个专栏收录

55 篇文章 4 订阅

订阅专栏

38 篇文章 6 订阅

订阅专栏

javaEE

7 篇文章 0 订阅

订阅专栏

前面的富文本编辑器Ueditor实战（一）和富文本编辑器Ueditor实战（二）-图片上传简单介绍了Ueditor能做啥以及Ueditor的简单配置。实际项目中，我们会结合具体的技术栈来进行扩展，本文以Springboot单体架构为例，前端使用thymeleaf集成ueditor。通过本文，您可了解springboot如何集成ueditor，如何自定义扩展后端的文件上传功能。

环境说明：

springboot2.2.13.RELEASE+jdk1.8+maven3.3.9+thymeleaf2.3.13+ueditor1.4.3

第一步、创建springboot项目以及pom.xml 配置

<project xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.yelang</groupId>
	<artifactId>boot-ueditor</artifactId>
	<version>1.0.0</version>
	<name>ueditor with springboot</name>
	<description>ueditor集成springboot案例，集成图片上传等功能</description>
    <properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
	</properties>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.2.13.RELEASE</version>
	</parent>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
		    <groupId>org.projectlombok</groupId>
		    <artifactId>lombok</artifactId>
		    <scope>provided</scope>
		</dependency>
        <dependency>
            <groupId>com.github.theborakompanioni</groupId>
            <artifactId>thymeleaf-extras-shiro</artifactId>
            <version>2.0.0</version>
        </dependency>
	</dependencies>
</project>

系统配置文件说明：

# 项目相关配置
system:
  # 名称
  name: boot-ueditor
  # 版本
  version: 1.0.0
  # 文件路径 示例（ Windows配置D:/boot-ueditor，Linux配置 /home/boot-ueditor）
  profile: D:/boot-ueditor

server:
  port: 8080

spring:
  thymeleaf:
    cache: false
    encoding: UTF-8
    mode: HTML
    #prefix: classpath:/templates/
    #suffix: .html
    servlet:
      content-type: text/html
  # 文件上传
  servlet:
     multipart:
       # 单个文件大小
       max-file-size:  50MB
       # 设置总上传的文件大小
       max-request-size:  300MB

第二步、工程目录结构大致如下：

第三步、修改自定义的json配置，使用后台bean的方式进行配置。首先定义一个普通的javaBean,如下：

在controller中定义ueditor配置文件的访问接口

    @GetMapping(value="/opt",params="action=config")
	@ResponseBody
    public Object config() {
		UeditorConfigVo config = new UeditorConfigVo();
		String urlPrefix = Constants.RESOURCE_PREFIX+"/upload/";
		config.setImageUrlPrefix(urlPrefix);
		config.setVideoUrlPrefix(urlPrefix);
		config.setFileUrlPrefix(urlPrefix);
		return config;
    }

在这里，设置映射的静态资源目录为图片、视频、附件等资源的访问前缀，在文件上传成功后直接返回访问的前缀即可。

第四步、thymeleaf页面定义，引入相关的js资源

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<title>springboot整合thymeleaf和ueditor实例</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor1_4_3_3/ueditor.config.js?v=1.4.3.3}"></script>
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor1_4_3_3/ueditor.all.js?v=1.4.3.3}">
	
</script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor1_4_3_3/lang/zh-cn/zh-cn.js?v=1.4.3.3}"></script>

<style type="text/css">
div {
	width: 100%;
}
</style>
</head>
<body>
	<div>
		<script id="editor" type="text/plain"
			style="width: 100%; height: 500px;"></script>
	</div>
	<script th:inline="javascript">
	    var url = [[@{/ueditor/opt}]];
		//实例化编辑器
		//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
		var ue = UE.getEditor('editor',{serverUrl: url});
	</script>
</body>
</html>

第五步、自定义后台文件上传接收器

@PostMapping(value="/opt",params="action=uploadimage")
@ResponseBody
public Map<String,String> uploadImage(@RequestParam("upfile") MultipartFile file) throws IOException {
	return this.fileProcess(file);
}
	
@PostMapping(value="/opt",params="action=uploadvideo")
@ResponseBody
public Map<String,String> uploadVideo(@RequestParam("upfile") MultipartFile file) throws IOException {
	return this.fileProcess(file);
}
	
@PostMapping(value="/opt",params="action=uploadfile")
@ResponseBody
public Map<String,String> uploadFile(@RequestParam("upfile") MultipartFile file) throws IOException {
	return this.fileProcess(file);
}
	
private Map<String,String> fileProcess(MultipartFile file) throws FileSizeLimitExceededException, IOException{
    	Map<String,String> map = new HashMap<String, String>(4);
        String originalFilename = file.getOriginalFilename();
        String fileType = originalFilename.substring(originalFilename.lastIndexOf("."));
	    String fileName = FileUploadUtils.upload(SysConfig.getUploadPath() + "/",file,fileType);
	    map.put("state", "SUCCESS");
	    map.put("url", fileName);
	    map.put("title", originalFilename);
	    map.put("original", originalFilename);
		return map;
  }

上述代码采用params参数来区分不同的请求，前台也可以设置后台指定一个固定的上传接口即可（可参考官方的说明）。

通过以上的实例可以完成自定义的图片、附件等上传的功能，并且可以在前台看到上传的资源在富文本编辑器中。最后的效果图如下：