vue-quill-editor+element-ui 自定義圖片上傳

背景： 產品但願在富文本中

1. 能夠截圖上傳
2. 複製粘貼文件上傳
3. 點擊上傳

公司用的富文本編輯器採用的是vue-quill-editor，

也找了一些富文本編輯器，其實都不太好用，還不如用這個。

vue-quill-editor支持自定義處理程序，因此在點擊圖片上傳icon時，會有一個回調

關鍵代碼：

options: {
       placeholder: '請輸入內容',
       theme: 'snow',
       modules: {
         toolbar: {
           container: toolbarOptions,
           handlers: {
             ['image'](value) {
               if (value) {
                 document.querySelector('.uploader input').click();
               } else {
                 this.myQuillEditor.format('image', false);
               }
             }
           }
         }
       }
     }
複製代碼

其實就是經過這個喚起餓了麼的圖片上傳組件來觸發真正的圖片上傳行爲。

template代碼:

<file-upload
     v-show="false"
     @on-success="onSuccess"
     @on-start="onStart"
   >
 </file-upload>
複製代碼

由於須要element-ui上傳圖片的組件配合，可是又不須要其顯示在界面上，因此能夠直接讓其隱藏，經過document.querySelector('.uploader input').click();觸發點擊事件，剩下的就是把圖片傳給服務器的事情了。

再經過on-success就能拿到上傳後的圖片資源了。

關於截圖和複製粘貼文件怎麼顯示在富文本，

關鍵代碼：

document.addEventListener('paste', event => {
       // 兼容問題
       if (event.clipboardData || event.originalEvent) {
         const clipboardData =
           event.clipboardData || event.originalEvent.clipboardData;

         if (clipboardData.items) {
           let items = clipboardData.items;
           let blob = null;
           // 阻止默認行爲
           event.preventDefault();
          
           for (let i = 0; i < items.length; i++) {
             if (items[i].type.indexOf('image') !== -1) {
               blob = items[i].getAsFile();
             }
           }
           if (blob !== null) {
             const reader = new FileReader();

             reader.onload = event => {
               // event.target.result 即爲圖片的Base64編碼字符串
               const base64Str = event.target.result;
               // 直接將base64編碼的字符串上傳
               this.uploadImage(base64Str);
             };

             reader.readAsDataURL(blob);
           }
         }
       }
     });
複製代碼

經過監聽paste就能得到處理，最終得到base64編碼的圖片數據，而後一切照舊，傳給服務器就好了。

注意，只兼容chrome。