随手记:小程序兼容后台的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.rhkb.cn/news/493938.html

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

相关文章

OpenHarmony-6.IPC/RPC组件

IPC/RPC组件机制 1.基本概念 IPC&#xff1a;设备内的进程间通信&#xff08;Inter-Process Communication&#xff09;。 RPC&#xff1a;设备间的进程间通信&#xff08;Remote Procedure Call&#xff09;。 IPC/RPC用于实现跨进程通信&#xff0c;不同的是前者使用Binder驱…

米思齐图形化编程之ESP32开发指导

在当今充满创意与探索的科技领域&#xff0c;米思齐图形化编程为广大爱好者开启了一扇通往智能硬件控制的便捷之门&#xff0c;尤其是当它与强大的 ESP32相结合时&#xff0c;更是碰撞出无限可能的火花。ESP32作为一款高性能、多功能的微控制器&#xff0c;拥有丰富的外设接口与…

tslib(触摸屏输入设备的轻量级库)的学习、编译及测试记录

目录 tslib的简介tslib的源码和make及make install后得到的文件下载tslib的主要功能tslib的工作原理tslib的核心组成部分tslib的框架和核心函数分析tslib的框架tslib的核心函数ts_setup()的分析(对如何获取设备名和数据处理流程的分析)函数ts_setup()自身的主要代码ts_setup()对…

使用 AI 辅助开发一个开源 IP 信息查询工具:一

本文将分享如何借助当下流行的 AI 工具,一步步完成一个开源项目的开发。 写在前面 在写代码时&#xff0c;总是会遇到一些有趣的机缘巧合。前几天&#xff0c;我在翻看自己之前的开源项目时&#xff0c;又看到了 DDNS 相关的讨论。虽然在 2021 年我写过两篇相对详细的教程&am…

Oracle:数据库的顶尖认证

在信息技术的飞速发展中&#xff0c;Oracle Corporation&#xff08;甲骨文公司&#xff09;以其在数据库领域的卓越成就而闻名遐迩。自1977年成立以来&#xff0c;Oracle已经从一个小型软件公司成长为全球最大的企业级软件公司之一&#xff0c;其产品和技术广泛应用于金融、电…

「配置应用的可见性」功能使用教程

引言 对于「应用可见性」这一概念&#xff0c;可能很多开发者小伙伴还不是很熟悉。简单举一个很典型的场景例子&#xff0c;当你开发的应用需要调起第三方应用时&#xff0c;这里就涉及到应用可见性的问题了&#xff0c;如果不配置相关的应用可见性&#xff0c;则你的应用是无…

flask flask-socketio创建一个网页聊天应用

应用所需环境&#xff1a; python 3.11.11 其他 只需要通过这个命令即可 pip install flask3.1.0 Flask-SocketIO5.4.1 -i https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple 最好是用conda创建一个新的虚拟环境来验证 完整的pip list如下 Package Version ----…

[计算机网络]唐僧的”通关文牒“NAT地址转换

1.NAT&#xff1a;唐僧的通关文牒 在古老的西游记中&#xff0c;唐僧师徒四人历经九九八十一难&#xff0c;终于取得了真经。然而&#xff0c;他们并不是一开始就获得了通关文牒&#xff0c;而是经过了重重考验&#xff0c;最终得到了国王的认可&#xff0c;才顺利通过了各个关…

数据结构经典算法总复习(下卷)

第五章:树和二叉树 先序遍历二叉树的非递归算法。 void PreOrderTraverse(BiTree T, void (*Visit)(TElemType)) {//表示用于查找的函数的指针Stack S; BiTree p T;InitStack(S);//S模拟工作栈while (p || !StackEmpty(S)) {//S为空且下一个结点为空&#xff0c;意味着结束遍…

【Windows版】opencv 和opencv_contrib配置

一、参考资料 &#xff08;四十一&#xff09;CMakeVSopencv/opencv_contrib 环境配置 从源码安装&#xff2f;penCV&#xff0c;使用python windowsvscodeopencv源码安装配置 二、关键步骤 1. opencv与opencv_contrib版本对齐 下载 opencv 下载 opencv_contrib opencv…

2014年IMO第4题

△ A B C \triangle ABC △ABC 中, B C BC BC 上有一点 P P P 满足 ∠ B A P = ∠ A C B \angle BAP=\angle ACB ∠BAP=∠ACB, 还有一点 Q Q Q 满足 ∠ A = Q A C = ∠ A B C \angle A=QAC=\angle ABC ∠A=QAC=∠ABC. 分别延长 A P AP AP, A Q AQ AQ 一倍至 M M M, N …

基于微信小程序的乡村旅游系统

博主介绍&#xff1a;java高级开发&#xff0c;从事互联网行业六年&#xff0c;熟悉各种主流语言&#xff0c;精通java、python、php、爬虫、web开发&#xff0c;已经做了多年的设计程序开发&#xff0c;开发过上千套设计程序&#xff0c;没有什么华丽的语言&#xff0c;只有实…

拆解一个微型气泵了解工作原理

原因 在焊接电路板时&#xff0c;测试打印后想要拆卸错误的板子上的元件&#xff0c;但每次拆卸过程中吸锡器手动按压到手疼。忽然看见一种小型气泵&#xff0c;不知道能不能做一个电动的吸锡器。 拆卸过程 第一步先把前盖板拆掉&#xff0c;这一步很好办到&#xff0c;就三…

SAP HCM 考勤时间冲突到分 源码分析

导读 时间冲突:SAP实施顾问应该都知道时间约束的概念&#xff0c;时间约束是按照主键作为分隔&#xff0c;其中信息类型有个seqnr的流水号字段&#xff0c;是控制时间约束的主要条件&#xff0c;今天分析的2001信息类型&#xff0c;如果日期相同&#xff0c;请假的开始时间与结…

《庐山派从入门到...》板载按键启动!

《庐山派从入门到...》板载按键启动&#xff01; 《庐山派从入门到...》板载按键启动&#xff01; 视频内容大致如下 我们之前了解了GPIO的输出模式使用方法&#xff0c;并且成功点灯&#xff0c;很明显本篇要来分享的自然是GPIO的输入模式 正好回顾一下之前学的python基础包…

分布式协同 - 分布式事务_TCC解决方案

文章目录 导图Pre流程图2PC VS 3PC VS TCC2PC&#xff08;Two-Phase Commit&#xff0c;二阶段提交&#xff09;3PC&#xff08;Three-Phase Commit&#xff0c;三阶段提交&#xff09;TCC&#xff08;Try-Confirm-Cancel&#xff09;2PC、3PC与TCC的区别2PC、3PC与TCC的联系 导…

新版国标GB28181设备端Android版EasyGBD支持国标GB28181-2022,支持语音对讲,支持位置上报,开源在Github

经过近3个月的迭代开发&#xff0c;新版本的国标GB28181设备端EasyGBD安卓Android版终于在昨天发布到Github了&#xff0c;最新的EasyGBD支持了国标GB28181-2022版&#xff0c;还支持了语音对讲、位置上报、本地录像等功能&#xff0c;比原有GB28181-2016版的EasyGBD更加高效、…

YOLO-World:Real-Time Open-Vocabulary Object Detection

目录 摘要 Abstract YOLO-World 1 模型架构 1.1 Text Encoder 1.2 YOLO Backbone 2 RepVL-PAN 2.1 T-CSPLayer 2.2 I-Pooling Attention 2.3 预测 3 消融实验 3.1 预训练数据 3.2 RepVL-PAN的消融实验 3.3 文本编码器 4 效果展示 4.1 零样本 4.2 根据词汇表检…

MySQL -- 库的相关操作

目录 查看数据库 创建数据库 直接创建&#xff1a; 加约束条件 if not exists 字符集和校对规则 什么是字符集 什么是校对规则 校对规则的主要功能 校对规则的特性 查看指定的数据库使用的字符集和校对规则&#xff1a; 比较是否区分大小写字母差异 显示创建语句 …

【spring-cloud-gateway总结】

文章目录 什么是gateway如何导入gateway依赖路由配置gateway配置断路器导包配置 什么是gateway 在微服务架构中&#xff0c;gateway网关是一个服务&#xff0c;它作为系统的唯一入口点&#xff0c;处理所有的客户端请求&#xff0c;然后将这些请求路由到适当的服务。提供了几个…