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

時間 2019-11-17

標籤文本編輯器支持複製 doc 圖片直接粘貼上傳简体版

原文原文鏈接

Chrome+IE默認支持粘貼剪切板中的圖片，可是我要發佈的文章存在word裏面，圖片多達數十張，我總不能一張一張複製吧？html

我但願打開文檔doc直接複製粘貼到富文本編輯器，直接發佈web

感受這個彷佛很困難，由於Ueditor自己不支持，粘貼後直接就是空白，這裏面必定有緣由。服務器

好，開始嘗試UMeditor，Chrome只能得到本地路徑，沒法讀取文件。app

https://ueditor.baidu.com/website/umeditor.html（有興趣能夠試試）編輯器

難道就這麼失敗了？ui

不，可是我意外發現UMeditor居然支持粘貼word中的多張圖片（僅支持IE11，不支持IE10如下版本、以及Chrome等）this

切換HTML，會看到你的圖片被組織成base64url

nice，機會來了，既然IE支持複製word中的多張圖片直接粘貼base64，既然有了base64咱們就有辦法上傳轉圖片啦！spa

那麼咱們來改造Ueditor，讓他支持IE11（總比沒得用強吧）code

打開你的ueditor.all.js(1.4.3版本如下行號根據本身使用的版本可能不一樣)

一、註釋掉14679行（暫時不明確有什麼不良影響）

//執行默認的處理
//me.filterInputRule(root);

二、在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();
                }