SpringBoot2整合富文本编辑器wangEditor(含文件上传)攻略

背景

最近要用到一个富文本编辑器，记得遥远的年代，调过Kingeditor、Ueditor。。。但是那些都很重，，，于是最近经常再留意这件事，直到最近看到一个wangEditor，体验了一下，又轻又好用，功能也相对丰富够用。

官网地址 http://www.wangeditor.com/

使用手册 https://www.kancloud.cn/wangfupeng/wangeditor3/332599

wangEditor有对应的CDN，本地无需放置，直接引用就可以了。

http://cdn.staticfile.org/wangEditor/10.0.13/fonts/w-e-icon.woff

http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.css

http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.js

http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.css

http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.js

http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.js.map

html页面

最简单的讲，只需要三行js代码，可以看下下面具体的demo，直接可以运行的。

var E = window.wangEditor
var editor2 = new E(’#div3’)
editor2.create()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>LikeU.Admin</title><link rel="icon" href="favicon.ico" /><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 4 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Ionicons -->
<link href="https://cdn.staticfile.org/ionicons/4.1.2/css/ionicons.min.css" rel="stylesheet"><link href="https://cdn.staticfile.org/codemirror/5.38.0/codemirror.min.css" rel="stylesheet">
<!--富文本编辑器wangEditor-->
<link href="https://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/wangEditor/10.0.13/fonts/w-e-icon.woff" rel="stylesheet"><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]--><!-- jQuery -->
<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="https://cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js"></script>
<script src="https://cdn.staticfile.org/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
<script src="https://cdn.staticfile.org/layer/2.3/layer.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.38.0/codemirror.min.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.38.0/addon/display/placeholder.min.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.38.0/mode/clike/clike.min.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.38.0/mode/sql/sql.min.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.38.0/mode/xml/xml.min.js"></script>
<!--富文本编辑器wangEditor-->
<script src="https://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.js"></script></head>
<body><div class="container"><nav class="navbar navbar-dark bg-primary"><a class="navbar-brand" href="http://github.com/moshowgame/SpringBootCodeGenerator">SpringBootCodeGenerator</a><ul class="nav navbar-nav"><li class="nav-item active"><a class="nav-link" href="http://blog.csdn.net/moshowgame">大狼狗CSDN</a></li></ul></nav></div><!-- Main jumbotron for a primary marketing message or call to action --><div class="jumbotron"><div class="container"><h1>Spring Boot Code Generator!</h1>基于<code>SpringBoot2</code>+<code>Freemarker</code>的代码生成器，用<code>DDL SQL</code>语句生成<code>JPA</code>/<code>JdbcTemplate</code>/<code>Mybatis</code>/<code>BeetlSQL</code>相关代码，支持<code>mysql</code>/<code>oracle</code>/<code>pgsql</code>三大数据库。以<code>释放双手</code>为目的，各大模板也在陆续补充和优化。欢迎大家多多提交模板和交流想法，如果发现有SQL语句不能识别，请<a href="https://github.com/moshowgame/SpringBootCodeGenerator/issues">留言</a>给我分析，谢谢！</p><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text">标题名称</span></div><input type="text" class="form-control" id="articleTitle" name="articleTitle" placeholder="标题"><div class="input-group-prepend"><span class="input-group-text">文章类型</span></div><input type="text" class="form-control" id="articleType" name="articleType" placeholder="文章类型：1嘉宾推荐 2恋爱教程 3mbti性格 4vip服务 5成功案例 6likeu科学依据"></div><!--<textarea id="ddlSqlArea" placeholder="请输入文章内容..." class="form-control" style="height: 250px;"></textarea>--><br><div id="editor"><p>欢迎使用富文本编辑器</p></div><p><button class="btn btn-primary btn-lg" id="btnGenCode" role="button">保存 »</button></p></div></div>
</body><script type="text/javascript">var E = window.wangEditorvar editor = new E('#editor')// 或者 var editor = new E( document.getElementById('editor') )// 配置服务器端地址editor.customConfig.uploadImgServer = 'http://localhost:8888/xxxx/upload/editor'//配置指定文件名editor.customConfig.uploadFileName = 'file'//如果图片不大，可以用base64存储//editor.customConfig.uploadImgShowBase64 = trueeditor.create()</script>
</html>

springboot的controller

核心上传代码其实应该差不多，大家可以根据自己的业务逻辑来生成或者做一些处理。

@RestController
@RequestMapping("/upload")
public class UploadController {//这个注入配置文件，主要是因为本地的路径和服务器url路径需要动态配置，可以自己写死，也可以动态获取@AutowiredAppConfig appConfig;@RequestMapping("/editor")@ResponseBodypublic 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 );}@Dataprivate class WangEditorResponse{String errno;List<String> data;public WangEditorResponse(String errno,List<String> 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\uploadurlpath: 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