最近在項目中第一次用到tinymce富文本就碰到這個問題,看了tinymce官方文檔,有高級插件可以實現(xiàn),但都是需要收費的,也查找了很多資料,在網(wǎng)上沒找到一個完整的相關文章,或者有很多累贅;筆者就自己花了點時間來研究,順便做個隨筆;

本篇文章是tinymce中復制圖片直接粘貼上傳到阿里云OSS的一個小案例,也可以提出來單獨使用,下面有明確說明:

代碼中每一步備注說明都很清晰

好了言歸正傳

上代碼

client具體數(shù)據(jù)從你們后臺要接口,無需多言,直接開始下一步

  images_upload_handler: this.imgUpload

tinymce富文本編輯器調(diào)用粘貼板(Ctrl+v)方法, 配合tinymce的plugins: "image"來使用

當然,下面代碼也可以直接提出來單獨使用,上干貨 ↓ ↓ ↓

還是代碼比較直接

onPaste(event) {
      let _this = this
      // 實現(xiàn)圖片粘貼上傳
      const items = (event.clipboardData || window.clipboardData).items;
      // items為偽數(shù)組  微信/QQ截圖以及此富文本區(qū)域內(nèi)復制粘貼的length為1,鼠標右鍵復制粘貼圖片以及文本的復制粘貼的length為2;
      let len = items.length
      for (let i = 0; i < len; i ++) {
        if (items[i].kind == 'file' && items[i].type.indexOf('image') != -1) {
        // 判斷是否為圖片類型
          event.preventDefault(); // 如果是圖片阻止自動粘貼到富文本編輯器
          let file = items[i].getAsFile(); // 獲取文件數(shù)據(jù)
          let blob = new Blob([file],{ type: file.type }) //實例化一個blob 將圖片大小以及類型初始化到blob里          
          let index = file.name.lastIndexOf(".");
          let fileName = Date.now() + file.name.substring(index, file.name.length);
          // fileName --- 圖片名稱可自行處理
          console.log("粘貼的是圖片類型")
          client(_this.aliyun).multipartUpload(fileName, blob).then((result) => {
             // 上傳圖片   _this.aliyun為后臺接口返回的數(shù)據(jù)賦值給client
            if (result.res.requestUrls) {
              let url = result.res.requestUrls[0].indexOf('http://') != -1 ? result.res.requestUrls[0].replace('http://', 'https://') : result.res.requestUrls[0];
              // 個人需求---默認加載為https做的處理(可省略)
              let last = url.lastIndexOf("?"); 
              if (last != -1 && last > index) {
                tinyMCE.execCommand("mceReplaceContent",false,`<img class="wscnph" src="${url.split("?")[0]}" >`)
                // 圖片上傳成功,插入到富文本編輯器
              } else {
                tinyMCE.execCommand("mceReplaceContent",false,`<img class="wscnph" src="${url}" >`)
                // 圖片上傳成功,插入到富文本編輯器
              }
            }
          })
          .catch(function (err) {
            // 上傳錯誤可自行給出提示
            console.log(err);
          })
        } else {
          // 不是圖片類型直接粘貼, 跳過oss上傳處理
          console.log("粘貼的不是圖片");
        }
      }
    }

目前僅支持微信/QQ截圖以及點擊鼠標右鍵復制粘貼,當然,親測world圖片點擊鼠標右鍵復制粘貼或者直接選中復制粘貼的上傳也OK; 但是目前只可以單個圖片上傳,后期如果找到好點的方法再優(yōu)化一下

如果小伙伴們有更好的方法,望不吝賜教

如果有用,點個贊再走唄,謝謝 ! ! !
歡迎評論區(qū)留言

聲明：創(chuàng)作不易,轉載請注明出處