天天看點

百度ueditor編輯器 複制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);

};

效果展示:

百度ueditor編輯器 複制word裡面帶圖文的文章,圖檔可以直接顯示
百度ueditor編輯器 複制word裡面帶圖文的文章,圖檔可以直接顯示

讨論群:223813913