如何使用wangEditor富文本编辑器：
文档地址：http://www.wangeditor.com/doc/
1.npm 安装
npm 安装 npm i wangeditor --save
2.引入
import E from "wangeditor";
3.使用-----在下面代码中展示
如何使用七牛云上传图片：
文档地址：https://developer.qiniu.com/kodo/sdk/1283/javascript
1.npm 安装
npm install qiniu-js
2.引入
constqiniu =require('qiniu-js') // or // import*asqiniufrom'qiniu-js'
3.使用---下面案例中展示
使用wangEditor 粘贴图片时将图片上传到七牛云，返回图片路径
<div id="editor"> </div> // 准备富文本渲染的盒子
<script>
import E from "wangeditor"; //引入wangEditor编辑器
import * as qiniu from "qiniu-js"; // 引入七牛云
export default{
data(){
return{
editor :" "，
content ：" "
}
}
mounted() {
let _this = this;
this.editor = new E(document.getElementById("editor"));
this.editor.config.height = 370; //设置编辑器高度
this.editor.config.customUploadImg = function (resultFiles, insertImgFn) { //粘贴图片时的回调
//resultFiles 粘贴的图片的基本信息
//insertImgFn 图片上传到七牛云后对图片进行回显的回调函数
resultFiles.forEach((element) => { //循环对粘贴图片执行上传回显功能
_this.getUploadToken(element, insertImgFn); //上传图片到七牛云
});
};
this.editor.config.onchange = function (newHtml) { //实时获取富文本框内的内容
_this.content = newHtml;
};
// 配置触发 onchange 的时间频率，默认为 200ms， 修改为 2000ms
this.editor.config.onchangeTimeout = 2000;
this.editor.create(); //创建富文本编辑器
},
methods:{
//上传附件到七牛云---------------------------start
getUploadToken(file, insertImgFn) {
let _this = this;
let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); //获取上传文件的后缀名
const name = (Math.random() * 10000000).toString(16).substr(0, 4) + "-" + new Date().getTime()
+ Math.random().toString().substr(2, 5) + "." + suffix; //构造唯一的文件名
let key = "/file/" + file.size + "/" + name; //生成key值
this.http.request({ //请求后端接口，获取在七牛云的上传验证信息
url: this.global.indexListPage.getRealUrl + "ossts/getUploadToken.action",
data: {
uploadType: "Img",
bucket: "xy-no-control", //不走防盗链
},
}) .then((data) => {
let token = data.configure.token;
_this.domain = data.domain;
const observable = qiniu.upload(file, key, token); // file: File 对象，上传的文件; key: 文件资源名; token: 上传验证信息，
//前端通过接口请求后端获得
const subscription = observable.subscribe(observer); // 上传开始
const observer = {
next(res) { //next: 接收上传进度信息的回调函数
console.log("next", res);
},
error(err) { //error: 上传错误后触发
console.log("error", err);
},
complete(res) { //complete: 接收上传完成后的后端返回信息，具体返回结构取决于后端sdk的配置
_this.imgurl = _this.domain + res.key; //生成图片的url
insertImgFn(_this.imgurl); //该方法是让粘贴的图片回显在富文本框内
},
};
});
}
//上传附件--------------------------------end
}
}
</script>
