關於富文本複製word,裏面摻雜圖片上傳的問題

圖片的複製無非有兩種方法，一種是圖片直接上傳到服務器，另一種轉換成二進制流的base64碼
目前限chrome瀏覽器使用
首先以um-editor的二進制流保存爲例：
打開umeditor.js，找到UM.plugins['autoupload']，而後找到autoUploadHandler方法，註釋掉其中的代碼。
加入下面的代碼：

//判斷剪貼板的內容是否包含文本

//首先解釋一下爲何要判斷文本是否是爲空

//在ctrl+c word中的文字或者圖片以後會返回1種(image/png)或者4種type(text/plain,text/html,text/rtf,image/png)類型的對象

//爲了兼容4種格式的狀況，作了以下的判斷

//以下代碼：e.originalEvent.clipboardData.items得到剪貼板的內容

//當粘貼了文本以後text是不爲空的，同時也會返回當前文本的圖片類型

//若是有文字的話不作任何的處理，若是隻粘貼圖片的話文本必定是空的，包括複製的桌面圖片或者截圖的圖片

var text = e.originalEvent.clipboardData.getData("text");

if(text == ""){

    var items=e.originalEvent.clipboardData.items;

     for (var i = 0, len = items.length; i < len; i++) {

        var item = items[i];

       if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) {

         

              var blob = item.getAsFile();

              getBase64(blob, function( base64 ) {

              //sendAndInsertImage(base64,me); 上傳到服務器

               setBase64Image(base64,me);

              });

              //阻止默認事件, 避免重複添加;

              e.originalEvent.preventDefault();

             };

        }

}

兩個方法：

//執行插入圖片的操做

function setBase64Image(base64,editor){

    editor.execCommand('insertimage', {src: base64,_src: base64});

}

//得到base64

function  getBase64(blob, callback) {

    var a = new FileReader();

    a.onload = function(e) {callback(e.target.result);};

    a.readAsDataURL(blob);

};

效果展現：

詳細內容可參考這篇文章：http://blog.ncmem.com/wordpress/2019/10/19/%e5%85%b3%e4%ba%8e%e5%af%8c%e6%96%87%e6%9c%ac%e5%a4%8d%e5%88%b6word%e9%87%8c%e9%9d%a2%e6%8e%ba%e6%9d%82%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0%e7%9a%84%e9%97%ae%e9%a2%98/