让富文本编辑器支持复制doc中多张图片直接粘贴上传

 

公司做的项目要用到文本上传功能。

Chrome+IE默认支持粘贴剪切板中的图片，但是我要粘贴的文章存在word里面，图片多达数十张，我总不能一张一张复制吧

我希望打开文档doc直接复制粘贴到富文本编辑器，直接发布

 那么Ueditor很不错，对于文本的上传功能可以说强大，点个赞！

但是对于多个图片的上传还有一点缺陷，因为Ueditor本身不支持，粘贴后直接就是空白，这里面一定有原因。

好，开始尝试改进UMeditor，Chrome只能获得本地路径，无法读取文件。

https://dwz.cn/ORcEz9fz

 

 

难道就这么失败了？

不，但是我意外发现UMeditor竟然支持说明: http://docimg.ncmem.com/162/7c9373db.jpg粘贴word中的多张图片

切换HTML

nice，机会来了，既然IE支持复制word中的多张图片，

那么我们来改造升级Ueditor。

打开你的ueditor.all.js(1.4.3版本以下行号根据自己使用的版本可能不同)

1、注释掉14679行（暂时不明确有什么不良影响）

//执行默认的处理

//me.filterInputRule(root)；

2、在28725行插入以下代码（上传完成替换为你的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方法

经过修改后我们重新运行这个示例。

随便选择一篇文章中的一段文章（记得要带有图片的），复制粘贴进示例。

优化进度条传输效果。

升级后可以支持多张图片上传。上传后的效果如下。

粘贴后上传的图片保留了标准img标签，加强了服务器的友好度，对多图片的上传加强了改进，使之支持多张图片上传的自动上传。

大功告成

现在已经成功应用在公司的所有web产品中了，客户一致好评，非常方便的功能。