1. 程式人生 > >讓富文字編輯器支援複製doc中多張圖片直接貼上上傳

讓富文字編輯器支援複製doc中多張圖片直接貼上上傳

Chrome+IE預設支援貼上剪下板中的圖片,但是我要釋出的文章存在word裡面,圖片多達數十張,我總不能一張一張複製

我希望開啟文件doc直接複製貼上到富文字編輯器,直接釋出

 

感覺這個似乎很困難,因為Ueditor本身不支援,粘貼後直接就是空白,這裡面一定有原因。

好,開始嘗試UMeditor,Chrome只能獲得本地路徑,無法讀取檔案。

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。