讓富文字編輯器支援複製doc中多張圖片直接貼上上傳
摘要：
Chrome+IE預設支援貼上剪下板中的圖片，但是我要釋出的文章存在word裡面，圖片多達數十張，我總不能 一張一張複製 吧？
我希望開啟文件doc直接複製貼上到富文字編輯器，直接釋出
感覺這個似乎很困難，因為Ueditor本身不支援，粘貼後直接就是空白，這裡面一定有原因...
Chrome+IE預設支援貼上剪下板中的圖片，但是我要釋出的文章存在word裡面，圖片多達數十張，我總不能 一張一張複製 吧 
？
我希望開啟文件doc直接複製貼上到富文字編輯器，直接釋出 
感覺這個似乎很困難，因為Ueditor本身不支援，粘貼後直接就是空白，這裡面一定有原因。
好，開始嘗試 UMeditor ，Chrome只能獲得本地路徑，無法讀取檔案。
ofollow,noindex">https://ueditor.baidu.com/website/umeditor.html （有興趣可以試試）
難道就這麼失敗了？
不 ，但是我 意外發現 UMeditor竟然 支援 
貼上word中的多張圖片（僅支援IE11，不支援IE10以下版本、以及Chrome等）
切換HTML，會看到你的圖片被組織成base64
nice，機會來了，既然IE支援複製word中的多張圖片直接貼上base64，既然有了base64我們就有辦法上傳轉圖片啦！
那麼我們來改造Ueditor，讓他支援IE11（總比沒得用強吧）
開啟你的ueditor.all.js(1.4.3版本以下行號根據自己使用的版本可能不同)
1、註釋掉14679行（暫時不明確有什麼不良影響）
//執行預設的處理 //me.filterInputRule(root);
2、在28725行插入以下程式碼（如果是使用IE11貼上會得到base64，先用佔位符佔位，再逐個把base64專成Blob檔案並上傳，上傳完成再替換為你的img屬性src為伺服器圖片url）
//ie11貼上圖片base64，此處用於上傳
if (baidu.editor.browser.ie11above) {
var eles = editor.document.getElementsByTagName('img');
var imgs = [];
for (var i = 0; i < eles.length; i++) {
var a = eles[i];
var src = a.getAttribute('src');
if (src.indexOf('data:image') == 0) {
a.setAttribute('width', a.width);
a.setAttribute('height', a.height);
a.className = 'loadingclass';
a.setAttribute('_src', src);
a.setAttribute('src', me.themePath + me.theme + '/images/spacer.gif');
imgs.push(a);
}
}
function parseBlob(data) {
var arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
var fdoc = editor.container.ownerDocument;
var div = fdoc.getElementById('ie11up_step');
if (div == null) {
div = fdoc.createElement('div');
fdoc.getElementsByClassName('edui-toolbar')[0].appendChild(div);
div.up = 0;
div.str = '圖片上傳中...(#/' + imgs.length + ')';
div.style.fontSize = '12px';
}
function upNextOne() {
if (imgs.length == 0) {
div.parentNode.removeChild(div);
return;
}
var a = imgs[0];
imgs = imgs.slice(1, imgs.length);
var xhr = new XMLHttpRequest();
var fd = new FormData();
fd.append("upfile", parseBlob((xhr.a = a).getAttribute('_src')), 'paste.png');
xhr.upload.addEventListener("progress", function (a) {
}, false);
xhr.addEventListener("load", function () {
var d = JSON.parse(this.response);
if (d && d.state == 'SUCCESS') {
this.a.setAttribute('src', d.url);
this.a.removeAttribute('_src');
this.a.removeAttribute('class');
div.innerText = div.str.replace('#', ++div.up);
upNextOne();
}
}, false);
xhr.open("POST", editor.getActionUrl('uploadimage'));
xhr.send(fd);
}
if (imgs.length > 0)
upNextOne();
}
3、處理ueditor提供的 uploadimage方法
大功告成 
客戶已經使用半年，沒有問題，非常有用，非常方便的功能，希望部落格園也改良一下TinyMCE。