很多网站设计师在使用百度富文本编辑器UEDITOR集成秀米的时候遇到一个大坑,就是远程抓取图片本地化时,抓取不到背景图片,原因是秀米的背景用的不是img标签。万维景盛前端工程师为您分享解决方法:
ueditor.all.js文件里找到catchremoteimage插件控制器,修改如下几部分代码:
如果您需要大批量采购阿里云虚拟主机,欢迎与阿里云授权分销商北京万维景盛(www.wanweiwang.cn)客服联系,实惠的代理价格奉上,QQ442956988,热线18610695105
UE.plugins['catchremoteimage'] = function () { var me = this, ajax = UE.ajax; /* 设置默认值 */ if (me.options.catchRemoteImageEnable === false) return; me.setOpt({ catchRemoteImageEnable: false }); me.addListener("afterpaste", function () { me.fireEvent("catchRemoteImage"); }); me.addListener("catchRemoteImage", function () { var catcherLocalDomain = me.getOpt('catcherLocalDomain'), catcherActionUrl = me.getActionUrl(me.getOpt('catcherActionName')), catcherUrlPrefix = me.getOpt('catcherUrlPrefix'), catcherFieldName = me.getOpt('catcherFieldName'); var remoteImages = [], imgs = domUtils.getElementsByTagName(me.document, "img"), backgroundimagestags = domUtils.getElementsByTagName(me.document, "section span div p "),//抓取背景图片所在的标签 test = function (src, urls) { if (src.indexOf(location.host) != -1 || /(^\.)|(^\/)/.test(src)) { return true; } if (urls) { for (var j = 0, url; url = urls[j++];) { if (src.indexOf(url) !== -1) { return true; } } } return false; }; //img标签 for (var i = 0, ci; ci = imgs[i++];) { if (ci.getAttribute("word_img")) { continue; } var src = ci.getAttribute("_src") || ci.src || ""; if (/^(https?|ftp):/i.test(src) && !test(src, catcherLocalDomain)) { remoteImages.push(src); } } //背景图片所在标签 var backgroundimages = []; //console.log("背景图片个数:" + backgroundimagestags.length); for (var i = 0, backci; backci = backgroundimagestags[i++];) { var bstyle = backci.style; var backgroundimgurltag = bstyle['background-image'] || bstyle['background'] || ""; if (backgroundimgurltag != null && backgroundimgurltag != "") { var backsrc = backgroundimgurltag.split("(")[1].split(")")[0].replace(/\"/g, "") || backgroundimgurltag.split("(")[1].split(")")[0].replace(/\"/g, "") || ""; //console.log("ci_src:" + backsrc); if (backsrc != null && backsrc != "") { if (/^(https?|ftp):/i.test(backsrc) && !test(backsrc, catcherLocalDomain)) { backgroundimages.push(backsrc); remoteImages.push(backsrc); } } } //console.log("remoteImages个数:" + remoteImages.length); } if (remoteImages.length) { me.fireEvent('catchremotestart'); catchremoteimage(remoteImages, { //成功抓取 success: function (r) { try { var info = r.state !== undefined ? r:eval("(" + r.responseText + ")"); } catch (e) { return; } /* 获取源路径和新路径 */ var i, j, ci, cj, oldSrc, newSrc, list = info.list; //img标签的替换 for (i = 0; ci = imgs[i++];) { oldSrc = ci.getAttribute("_src") || ci.src || ""; for (j = 0; cj = list[j++];) { if (oldSrc == cj.source && cj.state == "SUCCESS") { //抓取失败时不做替换处理 newSrc = catcherUrlPrefix + cj.url; domUtils.setAttributes(ci, { "src": newSrc, "_src": newSrc }); break; } } } //背景图片地址的替换 var bodyHtml = me.document.body.innerHTML; //console.log("上传之前html:" + bodyHtml); for (var a = 0; a < backgroundimages.length; a++) { oldSrc = backgroundimages[a] || ""; for (j = 0; cj = list[j++];) { if (oldSrc == cj.source && cj.state == "SUCCESS") { //抓取失败时不做替换处理 newSrc = catcherUrlPrefix + cj.url; //console.log("上传之后oldSrc:" + oldSrc); //console.log("上传之后newSrc:" + newSrc); //console.log("上传之后html:" + me.document.body.innerHTML.replace(oldSrc, newSrc)); bodyHtml = bodyHtml.replace(oldSrc, newSrc); break; } } } me.document.body.innerHTML = bodyHtml; me.fireEvent('catchremotesuccess'); me.fireEvent('catchremotecomplete'); }, //回调失败,本次请求超时 error: function () { me.fireEvent("catchremoteerror"); } }); } function catchremoteimage(imgs, callbacks) { //console.log("1111L:" + imgs.length); var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '', url = utils.formatUrl(catcherActionUrl + (catcherActionUrl.indexOf('?') == -1 ? '?':'&') + params), isJsonp = utils.isCrossDomainUrl(url), opt = { 'method': 'POST', 'dataType': isJsonp ? 'jsonp':'', 'timeout': 60000, //单位:毫秒,回调请求超时设置。目标用户如果网速不是很快的话此处建议设置一个较大的数值 'onsuccess': callbacks["success"], 'onerror': callbacks["error"] }; opt[catcherFieldName] = imgs; ajax.request(url, opt); } }); };