公司做的项目要用到文本上传功能。
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产品中了,客户一致好评,非常方便的功能。