让富文本编辑器支持复制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。