随手记:小程序兼容后台的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,传入外部链接

相关推荐
@PHARAOH17 小时前
WHAT - uni-app 条件编译技术
小程序·uni-app·条件编译
hunzi_120 小时前
选择网上购物系统要看几方面?
java·微信小程序·小程序·uni-app·php
芭拉拉小魔仙1 天前
Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题
小程序·uni-app·实时音视频
2305_797882091 天前
AI识图小程序的功能框架设计
人工智能·微信小程序·小程序
暮雨哀尘1 天前
微信小程序开发:开发实践
开发语言·算法·微信小程序·小程序·notepad++·性能·技术选型
幽络源小助理1 天前
微信小程序实验室管理SSM系统设计与实现
微信小程序·小程序
曲江涛2 天前
微信小程序 webview 定位 并返回
微信小程序·小程序
27669582922 天前
美团民宿 mtgsig 小程序 mtgsig1.2 分析
java·python·小程序·美团·mtgsig·mtgsig1.2·美团民宿
web_Hsir2 天前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
fakaifa2 天前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商