圖片的復制無非有兩種方法，一種是圖片直接上傳到服務器，另外一種轉換成二進制流的base64碼
目前限chrome瀏覽器使用，但是項目要求需要支持所有的瀏覽器，包括Windows和macOS系統。沒有辦法在網上搜了很多資料終於找到一個產品：WordPaster。
瀏覽器方面能夠支持ie6,ie7,ie8,ie9,ie10,chrome,firefox,edge幾乎所有的瀏覽器。
編輯器基本上也是全部都支持，並且支持vue，整合也比較簡單。
首先以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);
};
wordpaster與umeditor的整合教程
1.添加按鈕樣式
樣式代碼
.edui-icon-wordpaster{width: 16px;height: 16px;background: url('../../../../wordpaster/css/paster.png') no-repeat !important;}
2.在工具欄中添加按鈕
3.復制wordpaster目錄到項目中
4.在頁面中注冊按鈕
在頁面中添加引用
<linkhref="umeditor/themes/default/css/umeditor.min.css" type="text/css" rel="stylesheet">
<scripttype="text/javascript" src="umeditor/third-party/jquery.min.js" charset="utf-8"></script>
<scripttype="text/javascript" src="umeditor/umeditor.config.js" ></script>
<scripttype="text/javascript" src="umeditor/umeditor.min.js" ></script>
<linktype="text/css" rel="Stylesheet" href="wordpaster/css/WordPaster.css"/>
<linktype="text/css" rel="Stylesheet" href="wordpaster/js/skygqbox.css" />
<scripttype="text/javascript" src="wordpaster/js/json2.min.js" charset="utf-8"></script>
<scripttype="text/javascript" src="wordpaster/js/w.edge.js" charset="utf-8"></script>
<scripttype="text/javascript" src="wordpaster/js/w.app.js" charset="utf-8"></script>
<scripttype="text/javascript" src="wordpaster/js/w.file.js" charset="utf-8"></script>
<scripttype="text/javascript" src="wordpaster/js/WordPaster.js" charset="utf-8"></script>
<scripttype="text/javascript" src="wordpaster/js/skygqbox.js" charset="utf-8"></script>
在JS中注冊插件
代碼
<scripttype="text/javascript">
var pasterMgr = new WordPasterManager();
pasterMgr.Config["PostUrl"] = "http://localhost:8080/WordPaster2UEditor1x/upload.jsp"
pasterMgr.Config["Cookie"] = '<%=clientCookie%>';
pasterMgr.Load();//加載控件
UM.registerUI('wordpaster',
function(name) {
var me = this;
var $btn = $.eduibutton({
icon : name,
click : function(){
pasterMgr.Paste();
},
title: '粘貼Word圖片'
});
this.addListener('ready',function(){
pasterMgr.SetEditor(this);
});
return $btn;
}
);
UM.getEditor('editor');
</script>
整合后的效果
歡迎入群一起討論：374992201