随手记:小程序兼容后台的wangEditor富文本配置链接

场景:
在后台配置wangEditor富文本,可以文字配置链接,图片配置链接,产生的json格式为:
例子:
 <h1><a href="https://uniapp.dcloud.net.cn/" target="_blank"><span style="background-color: rgb(255, 122, 69);"><strong>文字配链接uni</strong></span></a></h1><h1><a href="https://ditu.amap.com/?amapexchange=%2F" target="_blank"><span style="color: rgb(56, 158, 13);">链接2</span></a></h1><p><a href="https://uniapp.dcloud.net.cn/api/system/clipboard.html#setclipboarddata" target="_blank">阿打算打</a></p><h1><span style="color: rgb(216, 68, 147);">图片配链接</span></h1><h1><img src="https://puree-test.oss-cn-shenzhen.aliyuncs.com/editor/2024/12/17/f2a8c01e4c194f28beb7d5b0b0925e02.jpg" alt="" data-href="https://www.baidu.com/" style=""/></h1><p><br></p><p><img src="https://puree-test.oss-cn-shenzhen.aliyuncs.com/editor/2024/12/17/1bb8ba4d5285487a9bec147e823edd45.gif" alt="" data-href="" style=""/></p><p><br></p><p><br></p><p> <a href="https://uniapp.dcloud.net.cn/" target="_blank">https://uniapp.dcloud.net.cn/</a> </p><p><br></p><p><br></p><p><img src="https://puree-test.oss-cn-shenzhen.aliyuncs.com/editor/2024/12/17/9d1056565a9a4c1d8e3ba8c26d76624c.jpg" alt="" data-href="https://v1.uviewui.com/components/tabs.html" style=""/>

小程序使用的组件u-parse

解决思路:
1.原来小程序的复制链接,改成跳转webview,传入外部链接
2.图片配置链接的,在组件处理html将原本data-href的链接通过正则找到新增href接收,后续获取href , 跳转webview,传入外部链接

感谢我的中国好组长写的正则:

// 定义正则表达式模式let pattern = /<img.*?src="(.*?)".*?alt="(.*?)".*?data-href="(.*?)".*?>/g;// 使用replace进行替换操作处理img标签,将data-href的链接赋值给href,下方的new Parser格式化DOM会把data-href去掉,所以增加一个href属性接收,在点击图片事件里需判断href的值是否是链接在做跳转html = html.replace(pattern, (match, p1, p2, p3) => {return `<img src="${p1}" alt="${p2}" href="${p3}" data-href="${p3}">`;});

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

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

相关文章

6.8 Newman自动化运行Postman测试集

欢迎大家订阅【软件测试】 专栏&#xff0c;开启你的软件测试学习之旅&#xff01; 文章目录 1 安装Node.js2 安装Newman3 使用Newman运行Postman测试集3.1 导出Postman集合3.2 使用Newman运行集合3.3 Newman常用参数3.4 Newman报告格式 4 使用定时任务自动化执行脚本4.1 编写B…

工具环境 | 工具准备

搭建一套验证环境需要的工具如下&#xff1a; 虚拟机&#xff1a;推荐virtualbox ubuntu VM好用&#xff0c;但是免费的好像木有了&#xff0c;ubuntu界面版更加容易上手。 网上找安装教程即可&#xff0c;注意实现文件共享、复制粘贴等功能。 EDA&#xff1a;VCS Veridi 工…

计算机网络之王道考研读书笔记-2

第 2 章 物理层 2.1 通信基础 2.1.1 基本概念 1.数据、信号与码元 通信的目的是传输信息。数据是指传送信息的实体。信号则是数据的电气或电磁表现&#xff0c;是数据在传输过程中的存在形式。码元是数字通信中数字信号的计量单位&#xff0c;这个时长内的信号称为 k 进制码…

ROS2学习配套C++知识

第3章 订阅和发布——话题通信探索 3.3.1 发布速度控制海龟画圆 std::bind cstd::bind绑定成员函数时&#xff0c;需要加上作用域以及取址符号 因为不会将成员函数隐式的转换成指针&#xff0c;因此需要加&符号&#xff1b; 后面的第一个参数必须跟具体对象&#xff0c;c…

法规标准-C-NCAP评测标准解析(2024版)

文章目录 什么是C-NCAP&#xff1f;C-NCAP 评测标准C-NCAP评测维度三大维度的评测场景及对应分数评星标准 自动驾驶相关评测场景评测方法及评测标准AEB VRU——评测内容(测什么&#xff1f;)AEB VRU——评测方法(怎么测&#xff1f;)车辆直行与前方纵向行走的行人测试场景&…

第十七届山东省职业院校技能大赛 中职组“网络安全”赛项任务书正式赛题

第十七届山东省职业院校技能大赛 中职组“网络安全”赛项任务书-A 目录 一、竞赛阶段 二、竞赛任务书内容 &#xff08;一&#xff09;拓扑图 &#xff08;二&#xff09;模块A 基础设施设置与安全加固(200分) &#xff08;三&#xff09;B模块安全事件响应/网络安全数据取证/…

mlr3机器学习AUC的置信区间提取

如果你在mlr3拿到机器学习的预测数据 ROC 过程原理探索 假设数据 df <- data.frame(Airis$Sepal.Length, groupsample(x c(0,1),size 150,replace T)) 分组为 0,1 # 变量A为连续性变量 library(pROC) roc_obj <- roc(df g r o u p , d f group, df group,dfA, le…

Halcon例程代码解读:安全环检测(附源码|图像下载链接)

安全环检测核心思路与代码详解 项目目标 本项目的目标是检测图像中的安全环位置和方向。通过形状匹配技术&#xff0c;从一张模型图像中提取安全环的特征&#xff0c;并在后续图像中识别多个实例&#xff0c;完成检测和方向标定。 实现思路 安全环检测分为以下核心步骤&…

Java——多线程进阶知识

目录 一、常见的锁策略 乐观锁VS悲观锁 读写锁 重量级锁VS轻量级锁 总结&#xff1a; 自旋锁&#xff08;Spin Lock&#xff09; 公平锁VS非公平锁 可重入锁VS不可重入锁 二、CAS 何为CAS CAS有哪些应用 1&#xff09;实现原子类 2&#xff09;实现自旋锁 CAS的ABA…

ubuntu18.04升级到ubuntu20.04

为了使用qt6&#xff0c;在ubuntu18.04上各种折腾失败&#xff0c;无奈只能升级到ubuntu20.04, 按照网上的教程没成功。自己摸索了 lsb_release -a df -h sudo apt update sudo apt upgrade -y sudo apt dist-upgrade -y sudo apt autoremove -y sudo apt clean sudo apt inst…

【Blender】【源码详解】BLI_mesh_boolean 实现详解

1. 背景&#xff1a; 最近因为项目需要&#xff0c;需要阅读 Blender 中关于 mesh boolean 的源码&#xff1b;因此&#xff0c;对 blender 中的 mesh boolean 源码进行解读&#xff1b; Github 上源码下载很慢&#xff0c;一般使用 Gitee: gitee Blender 源码 2. Mesh Boole…

qcow2镜像大小压缩

本文拟对qcow2进行压缩进行简单介绍 背景 qcow2镜像在使用一段时间后&#xff0c;总是会不断膨胀变大&#xff0c;所以在导出分享时一般都需要进行压缩以缩减占用空间。 清除空洞 qcow2方式也有稀疏的问题&#xff0c;在磁盘级别上看&#xff0c;镜像会有大量连续的相同空洞…

达梦 本地编码:PG_GBK, 导入文件编码:PG_UTF8错误

问题 达梦 本地编码&#xff1a;PG_GBK, 导入文件编码&#xff1a;PG_UTF8错误 解决 右键管理服务器 查看配置 新建一个数据库实例&#xff0c;配置跟之前的保持一致 新建一个用户&#xff0c;跟以前的用户名一样 在用户上&#xff0c;右键导入&#xff0c;选择dmp的位置 导…

深度学习卷积神经网络CNN之MobileNet模型网络模型详解说明(超详细理论篇)

1.MobileNet背景 2.MobileNet V1论文 3. MobileNett改进史 4. MobileNet模型结构 5. 特点&#xff08;超详细创新、优缺点及新知识点&#xff09; 一、MobileNet背景 随着移动设备的普及&#xff0c;深度学习模型的应用场景逐渐扩展至移动端和嵌入式设备。然而&#xff0c;传统…

垂起固定翼无人机大面积森林草原巡检技术详解

垂起固定翼无人机大面积森林草原巡检技术是一种高效、精准的监测手段&#xff0c;以下是对该技术的详细解析&#xff1a; 一、垂起固定翼无人机技术特点 垂起固定翼无人机结合了多旋翼和固定翼无人机的优点&#xff0c;具备垂直起降、飞行距离长、速度快、高度高等特点。这种无…

kubernates实战

使用k8s来部署tomcat 1、创建一个部署&#xff0c;并指定镜像地址 kubectl create deployment tomcat6 --imagetomcat:6.0.53-jre82、查看部署pod状态 kubectl get pods # 获取default名称空间下的pods kubectl get pods --all-namespaces # 获取所有名称空间下的pods kubect…

数据挖掘之认识数据

在数据挖掘过程中&#xff0c;数据的认识是非常重要的一步&#xff0c;它为后续的数据分析、建模、特征选择等工作奠定基础。以鸢尾花数据集&#xff08;Iris Dataset&#xff09;数据集之鸢尾花数据集&#xff08;Iris Dataset&#xff09;-CSDN博客为例&#xff0c;下面将介绍…

Java 优化springboot jar 内存 年轻代和老年代的比例 减少垃圾清理耗时 如调整 -XX:NewRatio

-XX:NewRatio 是 Java Virtual Machine (JVM) 的一个选项&#xff0c;用于调整 年轻代&#xff08;Young Generation&#xff09;和 老年代&#xff08;Old Generation&#xff09;之间的内存比例。 1. 含义 XX:NewRatioN 用于指定 老年代 与 年轻代 的内存比例。 N 的含义&…

统信UOS 1071 AI客户端接入本地大模型配置手册

文章来源&#xff1a;统信UOS 1071本地大模型配置手册 | 统信软件-知识分享平台 1. OS版本确认 1.1. 版本查看 要求&#xff1a;计算机&#xff0c;属性&#xff0c;查看版本&#xff08;1070,构建号> 101.100&#xff09; 2. UOS AI版本确认 UOS AI&#xff0c;设置&am…

定时任务——定时任务技术选型

摘要 本文深入探讨了定时任务调度系统的核心问题、技术选型&#xff0c;并对Quartz、Elastic-Job、XXL-Job、Spring Task/ScheduledExecutor、Apache Airflow和Kubernetes CronJob等开源定时任务框架进行了比较分析&#xff0c;包括它们的特点、适用场景和技术栈。文章还讨论了…