集成wangEditor富文本编辑器
2019-03-07 本文已影响0人
me_6b3f
以下是JavaWeb项目集成wangEditor富文本编辑器，wangEditor是一个轻量级的富文本编辑器，优点是：集成速度快，容易上手。缺点是：相对于百度Ue功能较少，不过也基本满足了我们所需的功能。
亲测有效的教程！！！
官网 ：wangEditor官网
下载： wangEditor项目
首先下载wangEditor项目，下面是项目的结构。
wangEditor项目结构.png
将release复制到项目中，以下是我的项目
自己的项目结构.png
下面是前端展示页面的代码。代码中，图片的文件服务器地址要换成自己定义的地址。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wangEditor</title>
</head>
<body>
<form id="addForm">
<div id="editor">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<input >
</form>
<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../static/release/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor;
var editor = new E('#editor');
//开启debug模式
editor.customConfig.debug = true;
// 关闭粘贴内容中的样式
editor.customConfig.pasteFilterStyle = false;
// 忽略粘贴内容中的图片
editor.customConfig.pasteIgnoreImg = true;
// 使用 base64 保存图片
//editor.customConfig.uploadImgShowBase64 = true
// 上传图片到服务器
editor.customConfig.uploadFileName = 'myfile'; //设置文件上传的参数名称
editor.customConfig.uploadImgServer = '/upload/editor/img'; //设置上传文件的服务器路径
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
//自定义上传图片事件
editor.customConfig.uploadImgHooks = {
before : function(xhr, editor, files) {
},
success : function(xhr, editor, result) {
console.log("上传成功");
},
fail : function(xhr, editor, result) {
console.log("上传失败,原因是"+result);
},
error : function(xhr, editor) {
console.log("上传出错");
},
timeout : function(xhr, editor) {
console.log("上传超时");
}
};
editor.create()
</script>
</body>
</html>
下面是后台的代码
@ResponseBody
@RequestMapping(value = "/editor/img",method = RequestMethod.POST)
public Map EditorImgUpload(@RequestParam("myfile") List<MultipartFile> list) {
//获取视频文件存储路径 如:videos/video
String imgStoragePath = uploadSettings.getImgStoragePath();
LinkedList<String> imgUrlList = new LinkedList<>();
for (MultipartFile file : list) {
//存储文件,生成文件下载地址 如:http://39.98.83.113:81/videos/micro/abc.mp4
String imgLink = createLink(file,imgStoragePath);
imgUrlList.add(imgLink);
}
return ResultUtils.errno(imgUrlList);
}
然后JSON的返回值类型定义成
{
// errno 即错误代码，0 表示没有错误。
// 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
"errno": 0,
// data 是一个数组，返回若干图片的线上地址
"data": [
"图片1地址",
"图片2地址",
"……"
]
}
好啦，大功告成！！！
下面是完成的效果图
