ueditor解决无法抓取远程背景图片问题的方法(php)

背景

laravel后台经常有用到编辑器的地方,Dcat使用的一般都是UEditor编辑器。最近项目经理在秀米排版以后,将内容复制到UEditor编辑器保存后发现,
在网站页面中发现图片竟然展示失败。经过浏览器控制台发现,图片的域名还是秀米的,那就好说了

解决方案

一、修改配置,允许抓取远程图片

  • UEditor很强大,直接就有配置,开启还是关闭抓取外部图片到本地服务器,该配置在ueditor.config.js文件中,搜索catchRemoteImageEnable,如下图:
    在这里插入图片描述

但是发现项目配置中已经开启了该功能,但是图片还是不展示,那就继续看页面元素,后来发现未抓取过来的图片是背景图。。。。真相了哈,那就修改抓取的代码,增加一个抓取背景图的逻辑

二、增加抓取背景图中的远程图片

1、打开文件ueditor.all.js文件,找到catchRemoteImage方法
2、直接修改该方法

/*** 远程图片抓取,当开启本插件时所有不符合本地域名的图片都将被抓取成为本地服务器上的图片*/
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 () {console.log("开始抓取" );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));//判断旧地址中,是不是有双引号,有的话,替换成单引号if(bodyHtml.indexOf('&quot;'+oldSrc +'&quot;') ){console.log(45674567890);bodyHtml = bodyHtml.replace('&quot;'+oldSrc +'&quot;', '&#39;'+newSrc +'&#39;');}else{console.log("不用替换");bodyHtml = bodyHtml.replace(oldSrc, newSrc);}console.log("替换之后html:" + bodyHtml);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);}});
};
  • 3、里面修改双引号为单引号的部分,是我发现图片是抓取过来了,但是ueditor编辑器回显的时候,因为双引号导致展示不出来,而额外加的。即使不加,网站前台展示也是正常的哟

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/36585.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

开源AI工具目录:Tap4 AI Tools Directory体验与介绍

在人工智能迅速发展的今天,AI工具正变得越来越多样化,它们在各个领域展现出巨大的潜力和实用性。为了更好地发现和管理这些工具,Tap4 AI Tools Directory提供了一个集中的平台,让AI爱好者和专业人士能够轻松找到所需的工具。 项目概览 项目来源 Tap4 AI工具目录是一个开…

Reqable实战系列:Flutter移动应用抓包调试教程

Flutter应用网络请求调试一直是业内难题&#xff0c;原因在于Dart语言标准库的网络请求不会走Wi-Fi代理&#xff0c;常规通过配置Wi-Fi代理来抓包的方式行不通。这给我们日常开发测试造成了很大的阻碍&#xff0c;严重降低工作效率。因此写一篇教程&#xff0c;讲解如何使用Req…

相机系列——从相机畸变到托勒密地图

by 木一 标签&#xff1a;#相机畸变 #畸变纠正 #鱼眼相机 #折射定律 #托勒密地图 引言 前文[1][2]我们介绍了针孔相机模型&#xff0c;以及针孔相机模型的相机标定过程&#xff0c;但针孔相机模型是对相机成像最简单的描述&#xff0c;实际的相机成像过程要远复杂很多。 首先…

Python | Leetcode Python题解之第202题快乐数

题目&#xff1a; 题解&#xff1a; def isHappy(self, n: int) -> bool:cycle_members {4, 16, 37, 58, 89, 145, 42, 20}def get_next(number):total_sum 0while number > 0:number, digit divmod(number, 10)total_sum digit ** 2return total_sumwhile n ! 1 an…

CSS|05 继承性与优先级

继承性 一、继承性的特点&#xff1a; 1.外层元素身上的样式会被内层元素所继承 2.如果内层元素与外层元素身上的演示相同时&#xff0c;外层元素的样式会被内层元素所覆盖 二、关于继承性的问题 是不是所有样式都能被继承&#xff1f; 答&#xff1a;并不是所有样式能被继承…

Mybatis面试学习

1.介绍一下mybatis mybatis是一个半自动的ORM的框架&#xff0c;ORM就是对象关系映射。&#xff08;对象指的是Java对象&#xff0c;关系指的是数据库中的关系模型&#xff0c;对象关系映射&#xff0c;指的就是在Java对象和数据库的关系模型之间建立一种对应关系&#xff09;…

Linux 搭建 kafka 流程

优质博文&#xff1a;IT-BLOG-CN 一、安装环境 【1】CenOS7虚拟机三台 【2】已经搭建好的zookeeper集群。 【3】软件版本&#xff1a;kafka_2.11-1.0.0 二、创建目录并下载安装软件 【1】创建目录 cd /opt mkdir kafka #创建项目目录 cd kafka mkdir kafkalogs #创建kafk…

学校机器该maven环境

在学校机器上 安装maven配置idea中的maven 后&#xff0c;发现无法运行&#xff0c; 推测是学校电脑上idea版本和我们下的maven 可能不太匹配。 学校的电脑上idea有集成的maven&#xff0c;但默认配置是访问国外的服务器 解决办法&#xff1a; 下载分享给各位同学的压缩包m…

代码随想录算法跟练 | Day14 | 二叉树 Part01

个人博客主页&#xff1a;http://myblog.nxx.nx.cn 代码GitHub地址&#xff1a;https://github.com/nx-xn2002/Data_Structure.git Day14 今天&#xff0c;主要是二叉树的基础知识&#xff0c;包括二叉树的结构、存储方式和遍历方式 二叉树的结构 二叉树顾名思义&#xff0…

注意力机制在大语言模型中的应用

在大语言模型中&#xff0c;注意力机制&#xff08;Attention Mechanism&#xff09;用于捕获输入序列中不同标记&#xff08;token&#xff09;之间的关系和依赖性。这种机制可以动态地调整每个标记对当前处理任务的重要性&#xff0c;从而提高模型的性能。具体来说&#xff0…

LSTM 简单的案例

后期总结&#xff1a; 参考&#xff1a; [1] 基于 PyTorch LSTM 进行时间序列预测 [2] https://zhuanlan.zhihu.com/p/685266225

Kubernetes之 资源管理

系列文章目录 Kubernetes之 资源管理 文章目录 系列文章目录前言一、资源管理介绍二、YAML语言介绍 1.1.YAML语法&#xff1a;2.读入数据总结 一、资源管理介绍 在kubernetes中&#xff0c;所有的内容都抽象为资源&#xff0c;用户需要通过操作资源来管理kubernetes。 1. kub…

SQL注入和防御方法

SQL注入是一种攻击手段&#xff0c;通过在SQL查询中插入恶意SQL代码片段&#xff0c;欺骗数据库服务器执行非授权的数据库操作。这种攻击可能导致数据泄露、篡改或丢失。为了防范SQL注入&#xff0c;可以采取以下几种策略&#xff1a; 1.使用预编译语句&#xff08;Prepared St…

Golang | Leetcode Golang题解之第201题数字范围按位与

题目&#xff1a; 题解&#xff1a; func rangeBitwiseAnd(m int, n int) int {for m < n {n & (n - 1)}return n }

图片与PDF文件相互转换

图片与PDF文件相互转换 一、概述二、提取PDF文件中的图片2.1代码实现2.2注意要点2.2.1代码使用2.2.2依赖包2.2.3图片序号设置 三、图片转换为PDF文件3.1代码实现3.2注意要点3.2.1代码使用3.2.2PDF文件尺寸设置3.2.3PDF文件中图片尺寸计算 一、概述 本文实现了提取PDF文件中包含…

threadX netx 设置IP地址以及获取IP地址

ThreadX 是一个实时操作系统&#xff08;RTOS&#xff09;内核&#xff0c;而 NetX 则是 Express Logic 提供的一个嵌入式 TCP/IP 网络栈&#xff0c;它经常与 ThreadX 一起使用来提供网络功能。在 ThreadX 和 NetX 中设置和获取 IP 地址通常涉及几个步骤。 设置 IP 地址 初始…

怎么打印加密的Excel文件,有哪些方法?

很多小伙伴都喜欢使用Excel来创建或是编辑表格文档&#xff0c;因为Excel中的功能十分的丰富且强大&#xff0c;在Excel中我们可以对表格文档进行各种操作。有的小伙伴可能在打印时需要给每一页表格添加页码&#xff0c;但又不知道该在哪里找到相关操作&#xff0c;其实很简单&…

视频编解码从H.264到H.266:浅析GB28181安防视频汇聚EasyCVR视频压缩技术

随着信息技术的飞速发展&#xff0c;视频编解码技术也在不断革新&#xff0c;以适应高清、超高清甚至8K视频时代的到来。视频编解码技术作为数字多媒体领域的核心技术之一&#xff0c;也在不断地演进和革新。从早期的H.261到现在的H.265、H.266&#xff0c;每一次技术的升级都极…

electron线上更新

一、安装electron-updater npm install --save electron-updater二、在main.js中引入使用 import { autoUpdater } from electron; if (!isDev) {const serverUrl https://your-update-server.com; // 自定义更新服务器地址或GitHub Releases地址autoUpdater.setFeedURL(${…

GPT-5:编织未来智能的经纬

GPT-5技术突破预测 随着GPT-5的预告&#xff0c;人工智能的叙事正步入一个崭新的篇章。想象中的GPT-5不仅是自然语言处理&#xff08;NLP&#xff09;领域的革命&#xff0c;更是对“理解”本身的一次重新定义。它可能集成深度学习的最新进展&#xff0c;如自注意力机制的进一步…