百度UEditor實(shí)現(xiàn)WORD粘貼公式自動(dòng)上傳
2021-10-11 15:07:42

?

圖片的復(fù)制無(wú)非有兩種方法，一種是圖片直接上傳到服務(wù)器，另外一種轉(zhuǎn)換成二進(jìn)制流的base64碼
目前限chrome瀏覽器使用
首先以u(píng)m-editor的二進(jìn)制流保存為例：
打開(kāi)umeditor.js，找到UM.plugins['autoupload']，然后找到autoUploadHandler方法，注釋掉其中的代碼。
加入下面的代碼：

//判斷剪貼板的內(nèi)容是否包含文本

//首先解釋一下為什么要判斷文本是不是為空

//在ctrl+c word中的文字或者圖片之后會(huì)返回1種(image/png)或者4種type(text/plain,text/html,text/rtf,image/png)類(lèi)型的對(duì)象

//為了兼容4種格式的情況，做了如下的判斷

//如下代碼：e.originalEvent.clipboardData.items獲得剪貼板的內(nèi)容

//當(dāng)粘貼了文本之后text是不為空的，同時(shí)也會(huì)返回當(dāng)前文本的圖片類(lèi)型

//如果有文字的話(huà)不做任何的處理，如果只粘貼圖片的話(huà)文本一定是空的，包括復(fù)制的桌面圖片或者截圖的圖片

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);?上傳到服務(wù)器

???????????????setBase64Image(base64,me);

??????????????});

??????????????//阻止默認(rèn)事件, 避免重復(fù)添加;

??????????????e.originalEvent.preventDefault();

?????????????};

????????}

}

兩個(gè)方法：

//執(zhí)行插入圖片的操作

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);

};

效果展示：

?

詳細(xì)內(nèi)容可參考這篇文章：ueditor word圖片上傳 – 澤優(yōu)軟件博客

討論群：223813913

?

?