? ? ? ? 在需要編寫并保存帶有各種格式，圖片的文章內(nèi)容時(shí)，往往需要用到富文本編輯器，這次使用到的富文本編輯器是kindeditor,使用下來功能基本足夠半沽，在這里記錄下在使用時(shí)自己添加的功能。
?kindeditor自帶有圖片上傳功能吴菠，由于幾個(gè)原因我需要自己實(shí)現(xiàn)一下者填。
（一）用的vue,自然是寫一個(gè)<kindeditor>組件和<uploadImg>組件；
（1）<uploadImg>：因?yàn)橛杏胕view作為基礎(chǔ)ui組件做葵，所以上傳用的也是iview的Upload組件占哟，:action為服務(wù)器的圖片上傳地址，在這里:on-success里的方法imgUploadSuccess蜂挪，在圖片上傳服務(wù)器 成功后重挑，向uploadImg的父組件傳遞服務(wù)器回傳的圖片地址（這邊我是再上傳阿里云）。
（2）在kindeditor組件中加入自己寫的圖片上傳組件：<Uploadimg?@getOssImg='addImgToKindeditor'?:uploadByPaste='pasteData'></Uploadimg>
引入npm?install下來的內(nèi)容棠涮，并添加textarea標(biāo)簽：
<textarea?class="form-control"?id='kindeditor'?ref="kindeditor"?v-model="localValue"?name="content"?v-loaded-callback='initKindeditor'></textarea>?
? initKindeditor函數(shù)是對(duì)kindeditor的初始化，
appendHtml方法追加內(nèi)容刺覆，addImgToKindeditor?(data)?{?this.appendHtml('<img?src='+data+'?style="width:auto;">')??}實(shí)現(xiàn)將uploadImg返回的圖片地址拼接后严肪，追加到編輯器內(nèi)容后面；?
（二）圖片粘貼上傳
?粘貼功能通過監(jiān)聽“paste”事件，獲取clipboardData對(duì)象驳糯，取得剪貼板的內(nèi)容篇梭。在這里將監(jiān)聽寫在initKindeditor初始化方法的options中，options有個(gè)afterCreate酝枢，定義創(chuàng)建后執(zhí)行的內(nèi)容恬偷，如圖:
?代碼段：
????????????this.edit.doc.body.addEventListener("paste",?function?(e)?{?
????????????????let?cbd?=?e.clipboardData;
????????????????let?ua?=?window.navigator.userAgent;??
????????????????//?如果是?Safari?直接?return
????????????????if?(?!(e.clipboardData?&&?e.clipboardData.items)?)?{
????????????????????return;
????????????????}
????????????????//?Mac平臺(tái)下Chrome49版本以下?復(fù)制Finder中的文件的Bug?Hack掉
????????????????if(cbd.items?&&?cbd.items.length?===?2?&&?cbd.items[0].kind?===?"string"?&&?cbd.items[1].kind?===?"file"?&&
????????????????????cbd.types?&&?cbd.types.length?===?2?&&?cbd.types[0]?===?"text/plain"?&&?cbd.types[1]?===?"Files"?&&
????????????????????ua.match(/Macintosh/i)?&&?Number(ua.match(/Chrome\/(\d{2})/i)[1])?<?49){
????????????????????return;
????????????????}?
????????????????if(cbd.items.length?==?0){
????????????????????_this.$Message.warning('本地圖片請(qǐng)使用圖片上傳功能！');
????????????????}
????????????????for(let?i?=?0;?i?<?cbd.items.length;?i++)?{
????????????????????let?item?=?cbd.items[i];?
????????????????????if(item.kind?==?"file"){???//循環(huán)獲得kind為file的帘睦，并用getASFile轉(zhuǎn)化賦值給blob
????????????????????????let?blob?=?item.getAsFile();
????????????????????????if?(blob.size?===?0)?{
????????????????????????????return;
????????????????????????}
????????????????????????//console.log(blob)//?blob?就是從剪切板獲得的文件?可以進(jìn)行上傳或其他操作
????????????????????????_this.pasteData?=?blob;?
????????????????????}
????????????????}
????????????????e.preventDefault();??//阻止默認(rèn)動(dòng)作
????????????},?false);
????????????在我的代碼中袍患，最后將圖片對(duì)象賦值給一個(gè)pasteData,作為Uploadimg的prop參數(shù)，監(jiān)聽到pasteData的變化后竣付，發(fā)起圖片上傳
????????????uploadImg組件中：
?????????????watch:?{
????????????????uploadByPaste?()?{?//監(jiān)聽粘貼內(nèi)容
????????????????????this.$refs.upload.post(this.uploadByPaste);??//發(fā)送表單
????????????????}
????????????}
????????????注意：粘貼功能的圖片來源只能是非本地圖片诡延，現(xiàn)在試過微信截圖，文檔中圖片單獨(dú)復(fù)制古胆，網(wǎng)頁圖片復(fù)制都可以實(shí)現(xiàn)復(fù)制粘貼的效果肆良。
