editor粘贴不能粘贴word中的图片是一个很头疼的问题,在我们的业务场景中客户要求必须使用ueditor并且支持word的图片粘贴,因为这个需求头疼了半个月,因为前端方面因为安全的原因是不允许访问本地文件的。
首先说一下,ueditor粘贴word图片的问题已经解决,但是不是纯web方法解决的,在纯浏览器的条件下是否能够解决也不确定中,但是ckeditor是可以支持word图片的富文本粘贴的
接下来就是调试思路和解决方法(所有的代码都是调试ueditor源码的ueditor.all.js文件)
1、首先是分析问题,
这块就不上代码了,大家可以自己去调试,很清晰的就是因为是本地文件所以不能上传
function filter(div) {} //大概是14611行的这个函数会把本地的图片路径过滤成一个
//编辑器默认的占位图
var root = UE.htmlparser(html); //罪魁祸首就是这行代码
但是尝试在罪魁祸首那行代码前将地址强制替换成网络地址就会发现,所替换的地址就会正常显示,因此找到了解决方案,就是将富文本中的img标签的src想办法替换成网络地址,
于是第一条解决思路出来了,在执行 罪魁祸首代码 之前,将本地的地址过滤出来,上传到服务器然后用服务器的地址进行替换,
2、解决问题
想到解决法案之后就去寻找解决方法,拿到图片的本地地址简单,
var imgReg = /<img.*?(?:>|\/>)/gi;
var imgArr = html.match(imgReg); // arr 为包含所有img标签的数组
利用正则加一些技术基础的处理,就能把所有的图片地址过滤成为一个数组,
我们(我和客户端的大神)的解决思路就是模仿input 的type=file的方式进行上传;
接下来是怎么拿到本地地址的文件,怎么将本地地址搞成文件,我查阅了好久好久的资料,还请教了各路大神(骚骚的三水,和传说中的周皇),得到一个结论,单纯前端不可能通过本地地址拿到文件(这估计就是ueditor为什么不能粘贴word图片的根本原因),因为我们的页面也在内嵌到客户端内与客户端有数据交流,因此就委托我们的客户端大佬帮我抓到了文件对象
function GetLocalFileObject(szPath){
var objFile = null;
try{
objFile = new File([], szPath, {type:"mb/bin"});
if (objFile != null && objFile.size == 0)
objFile = null;
}
catch(err){
objFile = null;
}
return objFile;
}
接下来的处理就简单了,就是利用前端的各种基础知识,上传图片,替换路径,
在这儿本来以为要苦逼的自己写一个上ajax,但是突然发现了一个ueditor的函数sendMyAndInsertFile 这是ueditor用来上传拖拽图片的一个函数
UE.plugin.register('autoupload', function (){} //这下面的第一个函数
sendAndInsertFile(){}
但是因为与粘贴在不同的作用域内因此需要将它copy一份到我们粘贴代码这块的作用域内,
当然为了严谨,我修改了一下方法名字,并且为了利于后面的html替换增加了一个回调函数
// 上传文件的函数
function sendMyAndInsertFile(file, editor,callback) {
var me = editor;
//模拟数据
var fieldName, urlPrefix, maxSize, allowFiles, actionUrl,
loadingHtml, errorHandler, successHandler,
下 filetype = /image\/\w+/i.test(file.type) ? 'image':'file',
loadingId = 'loading_' + (+new Date()).toString(36);
fieldName = me.getOpt(filetype + 'FieldName');
urlPrefix = me.getOpt(filetype + 'UrlPrefix');
maxSize = me.getOpt(filetype + 'MaxSize');
allowFiles = me.getOpt(filetype + 'AllowFiles');
actionUrl = me.getActionUrl(me.getOpt(filetype + 'ActionName'));
errorHandler = function(title) {
var loader = me.document.getElementById(loadingId);
loader && domUtils.remove(loader);
me.fireEvent('showmessage', {
'id': loadingId,
'content': title,
'type': 'error',
'timeout': 4000
});
};
if (filetype == 'image') {
loadingHtml = '<img class="loadingclass" id="' + loadingId + '" src="' +
me.options.themePath + me.options.theme +
'/images/spacer.gif" title="' + (me.getLang('autoupload.loading') || '') + '" >';
successHandler = function(data) {
var link = urlPrefix + data.url,
loader = me.document.getElementById(loadingId);
if (loader) {
loader.setAttribute('src',