松鼠的博客

 在需要編寫并保存帶有各種格式，圖片的文章內容時，往往需要用到富文本編輯器，這次使用到的富文本編輯器是kindeditor,使用下來功能基本足夠，在這里記錄下在使用時自己添加的功能。

 kindeditor自帶有圖片上傳功能，由于幾個原因我需要自己實現一下。

（一）用的vue,自然是寫一個<kindeditor>組件和<uploadImg>組件；

（1）<uploadImg>：因為有用iview作為基礎ui組件，所以上傳用的也是iview的Upload組件，:action為服務器的圖片上傳地址，在這里:on-success里的方法imgUploadSuccess，在圖片上傳服務器 成功后，向uploadImg的父組件傳遞服務器回傳的圖片地址（這邊我是再上傳阿里云）。

引入npm install下來的內容，并添加textarea標簽：

<textarea class="form-control" id='kindeditor' ref="kindeditor" v-model="localValue" name="content" v-loaded-callback='initKindeditor'></textarea> 

  initKindeditor函數是對kindeditor的初始化，

appendHtml方法追加內容，addImgToKindeditor (data) { this.appendHtml('<img src='+data+' style="width:auto;">')  }實現將uploadImg返回的圖片地址拼接后，追加到編輯器內容后面； 

（二）圖片粘貼上傳

 粘貼功能通過監聽“paste”事件，獲取clipboardData對象，取得剪貼板的內容。在這里將監聽寫在initKindeditor初始化方法的options中，options有個afterCreate，定義創建后執行的內容，如圖:

 代碼段：

            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平臺下Chrome49版本以下 復制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('本地圖片請使用圖片上傳功能！');

                }

                for(let i = 0; i < cbd.items.length; i++) {

                    let item = cbd.items[i]; 

                    if(item.kind == "file"){   //循環獲得kind為file的，并用getASFile轉化賦值給blob

                        let blob = item.getAsFile();

                        if (blob.size === 0) {

                            return;

                        }

                        //console.log(blob)// blob 就是從剪切板獲得的文件 可以進行上傳或其他操作

                        _this.pasteData = blob; 

                    }

                }

                e.preventDefault();  //阻止默認動作

            }, false);

            在我的代碼中，最后將圖片對象賦值給一個pasteData,作為Uploadimg的prop參數，監聽到pasteData的變化后，發起圖片上傳

            uploadImg組件中：

             watch: {

                uploadByPaste () { //監聽粘貼內容

                    this.$refs.upload.post(this.uploadByPaste);  //發送表單

                }

            }

            注意：粘貼功能的圖片來源只能是非本地圖片，現在試過微信截圖，文檔中圖片單獨復制，網頁圖片復制都可以實現復制粘貼的效果。