springboot+thymeleaf集成ueditor富文本
2020-07-21 本文已影响0人
花开半時偏妍
1.官网下载ueditor富文本编辑器（我这里使用的是1.4.3.3 utf-8 jsp版本的）
http://ueditor.baidu.com/website/download.html
2.将下载好的文件复制到static/ueditor/文件下
2.png
3.创建个跳转，UeditorControllr类
package com.example.ueditor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
@Controller
@RequestMapping(value = "/test")
public class UeditorController {
@RequestMapping(value = "test1",method = RequestMethod.GET)
public String test1() {
return "test";
}
}
4.创建测试页面，test.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<textarea name="content" id="content" style="min-height: 500px"></textarea>
</body>
<script type="text/javascript" th:src="@{/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" th:src="@{/ueditor/ueditor.all.min.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
<script type="text/javascript">
UE.getEditor('content');
</script>
</html>
这里已经可以看到雏形了，但是图片上传等功能不可用，需要进行以下配置~~~~~~
5.创建文件上传配置类
package com.example.ueditor;
import com.baidu.ueditor.ActionEnter;
import org.springframework.stereotype.Controller;
import org.springframework.util.ClassUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@Controller
public class ServerController {
@RequestMapping(value = "/config")
public void config(HttpServletRequest request, HttpServletResponse response) {
response.setContentType("application/json");
String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static/ueditor/jsp";
try {
response.setCharacterEncoding("UTF-8");
String exec = new ActionEnter(request, rootPath).exec();
System.out.println(exec);
PrintWriter writer = response.getWriter();
writer.write(new ActionEnter(request, rootPath).exec());
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
如果报错了，请添加相关依赖，主要是第一个就够了，嫌麻烦的话三个依赖都添加了就有备无患了。
<!--需要添加的jar包3个-->
<dependency>
<groupId>com.gitee.qdbp.thirdparty</groupId>
<artifactId>ueditor</artifactId>
<version>1.4.3.3</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.9</version>
</dependency>
6.修改ueditor.config.js文件
6.png
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
//添加代码
var server_url = window.location.protocol+"//"+window.location.hostname+":"+window.location.port
/**
* 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
*/
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径，这个不能被注释
UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
//, serverUrl: URL + "jsp/controller.jsp"
//添加代码，上一行代码注释掉
,serverUrl: server_url+"/config"
7.接着进入/static/ueditor/jsp/目录下，找到config.json文件
7.png
将图片访问路径的前缀都改成"/ueditor/jsp"，我数了下，大概有8个路径，都修改成这个就可以上传图片了。
