博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
让富文本编辑器支持复制doc中多张图片直接粘贴上传
阅读量:4609 次
发布时间:2019-06-09

本文共 3868 字,大约阅读时间需要 12 分钟。

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

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

 

感觉这个似乎很困难,因为Ueditor本身不支持,粘贴后直接就是空白,这里面一定有原因。

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

(有兴趣可以试试)

 

 

难道就这么失败了?

,但是我意外发现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。

 

转载于:https://www.cnblogs.com/ycbt/p/10037809.html

你可能感兴趣的文章
也谈智能手机游戏开发中的分辨率自适应问题
查看>>
【转】MYSQL数据库设计规范与原则
查看>>
《中国大历史》—— 读后总结
查看>>
回溯法算法框架
查看>>
残差学习【转载】
查看>>
0302 关于IT行业的就业感想
查看>>
3、流程语句相关练习
查看>>
30、git 使用
查看>>
iOS网络-02-数据解析(JSON与XML)
查看>>
python列表求和的几种等效电路
查看>>
Luogu P3393 逃离僵尸岛
查看>>
Flatten Binary Tree to Linked List
查看>>
Edit Distance
查看>>
软件工程第一次作业补充
查看>>
N76E003---输入捕获
查看>>
poj 1094 Sorting It All Out(拓扑排序)
查看>>
acdream B - 郭式树 (水题 卡cin,cout, 卡LL)
查看>>
BMP图像格式
查看>>
python的匿名函数lambda解释及用法
查看>>
c#遍历Dictionary使用KeyValuePair
查看>>