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。
最新评论: