springboot使用UEditor富文本编辑器
时间: 2023-06-30 19:09:10 浏览: 226
SpringBoot整合UEditor富文本编辑器
3星 · 编辑精心推荐
可以使用以下步骤在Spring Boot中集成UEditor富文本编辑器:
1.下载UEditor插件,将其解压缩到项目的静态资源目录(如:src/main/resources/static/ueditor)中。
2.在Spring Boot的配置文件application.properties或application.yml中添加如下配置:
```properties
spring.resources.static-locations=classpath:/static/
```
或
```yaml
spring:
resources:
static-locations: classpath:/static/
```
3.编写一个Controller来访问UEditor插件,代码如下:
```java
@Controller
@RequestMapping("/ueditor")
public class UeditorController {
@GetMapping("/")
public String index() {
return "ueditor/index";
}
@PostMapping("/upload")
@ResponseBody
public String upload(HttpServletRequest request) {
String result = "";
try {
// 获取UEditor上传的文件
MultipartFile file = ((MultipartHttpServletRequest) request).getFile("upfile");
// 获取文件名
String fileName = file.getOriginalFilename();
// 获取文件后缀
String suffix = fileName.substring(fileName.lastIndexOf("."));
// 生成新的文件名
String newFileName = UUID.randomUUID().toString() + suffix;
// 获取文件保存路径
String savePath = "src/main/resources/static/ueditor/upload/";
File saveFile = new File(savePath + newFileName);
// 保存文件
file.transferTo(saveFile);
// 返回文件访问路径
result = "{\"state\":\"SUCCESS\",\"url\":\"/ueditor/upload/" + newFileName + "\",\"title\":\"" + fileName + "\",\"original\":\"" + fileName + "\"}";
} catch (Exception e) {
e.printStackTrace();
result = "{\"state\":\"ERROR\"}";
}
return result;
}
}
```
4.在静态资源目录中创建一个index.html文件,代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UEditor Demo</title>
<!-- 引入UEditor -->
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<!-- 编辑器容器 -->
<script id="editor" type="text/plain"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var editor = UE.getEditor('editor');
</script>
</body>
</html>
```
5.启动应用,访问http://localhost:8080/ueditor/,即可看到UEditor富文本编辑器。
注意:在上传文件时,需要先创建一个文件夹(如:upload),并将其放在静态资源目录中。同时,需要对文件保存路径进行修改。
阅读全文