SpringBoot2整合富文本编辑器wangEditor(含文件上传)攻略
背景
最近要用到一个富文本编辑器，记得遥远的年代，调过Kingeditor、Ueditor。。。但是那些都很重，，，于是最近经常再留意这件事，直到最近看到一个wangEditor，体验了一下，又轻又好用，功能也相对丰富够用。
官网地址 http://www.wangeditor.com/
使用手册 https://www.kancloud.cn/wangfupeng/wangeditor3/332599
wangEditor有对应的CDN，本地无需放置，直接引用就可以了。
|
html页面
最简单的讲，只需要三行js代码，可以看下下面具体的demo，直接可以运行的。
var E = window.wangEditor
var editor2 = new E(’#div3’)
editor2.create()
LikeU.Admin
Spring Boot Code Generator!
基于SpringBoot2+Freemarker的代码生成器，用DDL SQL语句生成JPA/JdbcTemplate/Mybatis/BeetlSQL相关代码，支持mysql/oracle/pgsql三大数据库。以释放双手为目的，各大模板也在陆续补充和优化。欢迎大家多多提交模板和交流想法，如果发现有SQL语句不能识别，请留言给我分析，谢谢！
标题名称
文章类型
欢迎使用富文本编辑器
springboot的controller
核心上传代码其实应该差不多，大家可以根据自己的业务逻辑来生成或者做一些处理。
@RestController
@RequestMapping("/upload")
public class UploadController {
//这个注入配置文件，主要是因为本地的路径和服务器url路径需要动态配置，可以自己写死，也可以动态获取
@Autowired
AppConfig appConfig;
@RequestMapping("/editor")
@ResponseBody
public Object editor(@RequestParam("file") MultipartFile file) {
String fileName ="";
if(!file.isEmpty()){
//返回的是字节长度,1M=1024k=1048576字节 也就是if(fileSize<5*1048576)
if(file.getSize()>(1048576*5)){return ApiReturnUtil.error("文件太大，请上传小于5MB的");}
String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
if(StringUtils.isBlank(suffix)){return ApiReturnUtil.error("上传文件没有后缀，无法识别");}
fileName = System.currentTimeMillis()+suffix;
String saveFileName = appConfig.getFilepath()+"/article/"+fileName;
System.out.println(saveFileName);
File dest = new File(saveFileName);
System.out.println(dest.getParentFile().getPath());
if(!dest.getParentFile().exists()){ //判断文件父目录是否存在
dest.getParentFile().mkdir();
}
try {
file.transferTo(dest); //保存文件
} catch (Exception e) {
e.printStackTrace();
return new WangEditorResponse("1","上传失败"+e.getMessage());
//return ApiReturnUtil.error("上传失败"+e.getMessage());
}
}else {
return new WangEditorResponse("1","上传出错");
}
String imgUrl=appConfig.getUrlpath()+"article/"+fileName;
return new WangEditorResponse("0",imgUrl );
}
@Data
private class WangEditorResponse{
String errno;
List data;
public WangEditorResponse(String errno,List data){
this.errno=errno;
this.data=data;
}
public WangEditorResponse(String errno,String data){
this.errno=errno;
this.data=new ArrayList<>();
this.data.add(data);
}
}
}
自动注入动态配置文件
@Component
@Data
@ConfigurationProperties(prefix = "system") // 接收application.yml中的myProps下面的属性
public class AppConfig {
public String filepath;
public String urlpath;
}
会自动读取以下application.yml中的变量
system:
filepath: /vdb1/xxx/vue/resources
#windows下用这个filepath: D:\temp\upload
urlpath: http://www.xxxx.cn/resources/
上传返回格式
其中/http://localhost:8888/xxxx/upload/editor是上传图片的服务器端接口，接口返回的数据格式如下（实际返回数据时，不要加任何注释！！！）
{
// errno 即错误代码，0 表示没有错误。
// 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
"errno": 0,
// data 是一个数组，返回若干图片的线上地址
"data": [
"图片1地址",
"图片2地址",
"……"
]
}
限制图片大小
默认限制图片大小是 5M
// 将图片大小限制为 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
更多详情可以到官方文档去看https://www.kancloud.cn/wangfupeng/wangeditor3/335782