在官网下载 wangEditor.min.js,在页面引入
<body>
<div id="editor"></div><br />
</body>
<script>
var E = window.wangEditor
var editor = new E('#editor')
// 隐藏“网络图片”tab
editor.customConfig.showLinkImg = false;
// 关闭粘贴内容中的样式
editor.customConfig.pasteFilterStyle = false;
// 忽略粘贴内容中的图片
editor.customConfig.pasteIgnoreImg = false;
//上传图片时，可自定义filename（controller层需要设置传入的名字时保持一致）
editor.customConfig.uploadFileName = 'myFile';
// 配置服务器端地址 upload:上传图片地址（调用controller层接口）
editor.customConfig.uploadImgServer= app.serverUrl + 'tbArticle/uploadImg';
// 将图片大小限制为 3M
//editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
},
success: function (xhr, editor, result) {
// 图片上传并返回结果，图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
fail: function (xhr, editor, result) {
console.log("fail = "+xhr);
// 图片上传并返回结果，但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
error: function (xhr, editor) {
console.log("error = "+xhr);
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
timeout: function (xhr, editor) {
console.log("timeout = "+xhr);
},
customInsert: function (insertImg, result, editor) {
//这个是用来回显的
// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
//data是我后台返回的图片调用地址：url
insertImg(result.msg);
// result 必须是一个 JSON 格式字符串！！！否则报错
}
}
editor.create();
//用来修改富文本编辑器的高度
let eds = document.getElementsByClassName('w-e-text-container');
eds[0].style = eds[0].style.cssText + 'height: 600px';
</scritp>
看下后端的接口
@PostMapping("/uploadImg")
@ResponseBody
public R uploadImg(@RequestParam("myFile") MultipartFile file,HttpServletRequest request) {
UUID uuid = null;
String newFileName = null;
if (!file.isEmpty()) {
try {
String[] splits = file.getOriginalFilename().split("\\.");
uuid = UUID.randomUUID();
newFileName= uuid +"."+ splits[splits.length - 1];
//File saveDir = new File("F:\\tomcat-7\\apache-tomcat-7.0.96\\webapps\\whlhs\\img\\"+uuid+".png");
File saveDir = new File("/home/ssd/tomcat/www/webapps/whlhs/img/" + newFileName );
if (!saveDir.getParentFile().exists())
saveDir.getParentFile().mkdirs();
file.transferTo(saveDir);
} catch (Exception e) {
return R.error();
}
}
//这个返回的路径很重要，页面要根据这个路径去访问这张图片
return R.ok("http://localhost:8081/whlhs/img/"+newFileName);
}
