如何使用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>? ? ? // 準(zhǔn)備富文本渲染的盒子
<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; //設(shè)置編輯器高度
????this.editor.config.customUploadImg?=?function?(resultFiles,?insertImgFn)?{? //粘貼圖片時的回調(diào)
? ? ? ?//resultFiles 粘貼的圖片的基本信息
? ? ? ?//insertImgFn 圖片上傳到七牛云后對圖片進(jìn)行回顯的回調(diào)函數(shù)
??????resultFiles.forEach((element)?=>?{? ? //循環(huán)對粘貼圖片執(zhí)行上傳回顯功能
????????_this.getUploadToken(element,?insertImgFn);? //上傳圖片到七牛云
??????});
????};
????this.editor.config.onchange?=?function?(newHtml)?{? //實(shí)時獲取富文本框內(nèi)的內(nèi)容
??????_this.content?=?newHtml;
????};
????//?配置觸發(fā)?onchange?的時間頻率，默認(rèn)為?200ms，?修改為 2000ms
????this.editor.config.onchangeTimeout?=?2000;?
????this.editor.create();? ?//創(chuàng)建富文本編輯器
??},
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;? //構(gòu)造唯一的文件名
??????let?key?=?"/file/"?+?file.size?+?"/"?+?name;? //生成key值
??????this.http.request({? ?//請求后端接口，獲取在七牛云的上傳驗(yàn)證信息
??????????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: 上傳驗(yàn)證信息，
? ? ? ? ? //前端通過接口請求后端獲得
? ? ? ? ? const?subscription?=?observable.subscribe(observer);?//?上傳開始
? ? ? ? ? ?const?observer?=?{?
????????????next(res)?{? ?//next: 接收上傳進(jìn)度信息的回調(diào)函數(shù)
??????????????console.log("next",?res);
????????????},
????????????error(err)?{? //error: 上傳錯誤后觸發(fā)
??????????????console.log("error",?err);
????????????},
????????????complete(res)?{? //complete: 接收上傳完成后的后端返回信息，具體返回結(jié)構(gòu)取決于后端sdk的配置
??????????????_this.imgurl?=?_this.domain?+?res.key;? //生成圖片的url
??????????????insertImgFn(_this.imgurl);? //該方法是讓粘貼的圖片回顯在富文本框內(nèi)
????????????},
??????????};
????????});
????}
????//上傳附件--------------------------------end
}
}
</script>
