The previous rich text editor Ueditor combat (1) and rich text editor Ueditor combat (2) - picture upload briefly introduce what Ueditor can do and the simple configuration of Ueditor. In the actual project, we will expand with the specific technology stack. This article takes the Springboot single architecture as an example, and the front end uses thymeleaf to integrate ueditor. Through this article, you can learn how springboot integrates ueditor and how to customize the file upload function of the extended backend.
Environment description:
springboot2.2.13.RELEASE+jdk1.8+maven3.3.9+thymeleaf2.3.13+ueditor1.4.3
The first step, create a springboot project and pom.xml configuration
<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 configuration file description:
# 项目相关配置
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
The second step, the project directory structure is roughly as follows:
The third step is to modify the custom json configuration and use the background bean to configure it. First define an ordinary javaBean, as follows:
Define the access interface of the ueditor configuration file in the controller
@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;
}Here, set the mapped static resource directory as the access prefix of resources such as pictures, videos, and attachments, and return the access prefix directly after the file is uploaded successfully.
The fourth step is to define the thymeleaf page and introduce related js resources
<!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>Step 5. Customize the background file upload receiver
@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;
}The above code uses params parameters to distinguish different requests. The foreground can also set the background to specify a fixed upload interface (refer to the official instructions).
Through the above example, you can complete the function of uploading custom pictures, attachments, etc., and you can see the uploaded resources in the rich text editor in the foreground. The final rendering is as follows:
ps: Friends who are interested can try the effect of uploading mp4 resources. How to solve the problem after uploading mp4 will be followed up with a blog post for a detailed introduction, welcome to pay attention.