Taro开发遇到的问题1：给富文本添加绑定事件

最新推荐文章于 2025-08-06 15:30:45 发布
原创 最新推荐文章于 2025-08-06 15:30:45 发布 · 2.2k 阅读 · 4
标签
#taro #微信小程序 #前端
在Taro微信小程序中，当运营使用富文本编辑器配置活动详情时，遇到一个问题：如何在点击富文本中的a链接时执行特定操作。解决方案是通过识别渲染后的元素类名为'h5-a'的链接，利用Taro的transformElement函数来绑定点击事件。在处理函数中，可以实现如复制链接或在小程序内打开链接等功能。通过修改TaroText结构并添加tap事件，成功解决了这个问题。

背景

  1. 技术栈：Taro
  2. 端：微信小程序
  3. 运营会在后台使用富文本编辑器配置活动详情。
    一段富文本中，有若干a链接，将其渲染至小程序，需要在点击a链接的时候做一些操作，比如复制该链接，或者是在小程序中打开该链接。

难题

渲染富文本使用dangerouslySetInnerHTML或者RichText，最终都会变成taroelement，然后生成对应平台的元素。无法从这些元素中直接找出哪个是一个a链接，也就没办法绑定点击时间

解决

  1. 找到a链接对应的元素
  2. 绑定点击事件

在这里插入图片描述

观察渲染到页面的元素，可以发现链接渲染的元素，类名都是h5-a。那么我们可以通过类名定位到元素。然后在给这个元素绑定事件即可。

参考官方文档：
Taro官方文档-渲染HTML

transformElement:该函数第一个参数的值为 Taro 默认处理好的 TaroText，第二个参数是 HTML
解析器解析好的 Text，最后返回的 TaroText 对象参与 HTML 中的字符串渲染。

TaroText的结构是这样的

最低0.47元/天 解锁文章
微信小程序富文本解析
01-27
ianzhi/wxParse 文档放在这里太长了，安装和使用方法到这里查看吧。 可用属性 属性说明： data： 要渲染到页面的数据 type： 要渲染数据的类型（html或者md） padding: 渲染后的图片内距 url-prefix: 渲染图片时的固定url前缀 emoji: 布尔类型,是否启用emoji替换 default-img: 图片加载失败时默认占位图 img-suffix: 图片后缀 小程序示例 微信小程序更新会慢于组件更新，主要在于微信小程序的审核时间。更新状态请以更新日志为准。 待修复问题 更新日志 2019-07-18 a标签默认的复制链接改为上浮linkClick事件，使用1.0.10版本请注意监听链接点击事件,此修改由@mateor95提交于issue#23 添加图片后缀属性 2019-07-13 源代码目录组件名称大小写有误的问题，导致按照文档使用报错 201
微信小程序中富文本解决方法
03-12
微信小程序中不能直接将获取的富文本信息放到页面上展示，此文件即可解决此问题
小程序实现富文本图片点击预览
【03】的博客
07-17 4503
前言 微信小程序的rich-text组件是不能获取里面节点标签的，也不能添加事件 实现 1.引入Parser富文本组件 组件下载地址：parser.min.zip、组件官方文档地址：parser官方文档 2.将组件放入项目指定目录内、并在app.json注册组件 "usingComponents": { "parser": "/utils/parser.min/parser" } 3.在wxml中使用 <!--<rich-text nodes="{{rithText}}"&gt
设置富文本部分点击事件
qq_35999545的博客
05-16 789
String content = "如您想开启或关闭相关权限，您可在手机设置--权限管理-智慧安全运营中更改状态（各厂商机型设置路径可能存在不一致，您可参考厂商设置说明）。*效果：《个人信息保护政策》为蓝色，且可点击事件。详细隐私政策，您可参考：《个人信息保护政策》";
Taro支持富文本（微信小程序）图片样式问题及可点击事件
岁月如歌去，十年弹指间
02-27 2832
这个属性相比于其他方案的优势在于：1. 支持修改富文本样式 2. Taro官方属性，比插件靠谱。react提供的dangerouslySetInnerHTML即可。正常方式无法绑定事件,样式设置不生效。使用这个属性存在两个问题需要解决。1、需要解决图片样式错乱问题。
【uniapp】富文本点击事件
每天进步一点点, 靠近小目标一点点~
06-06 1761
使用第三方富文本解析插件 u-parse 实现 app内的富文本增加点击事件进行界面跳转
tinymce富文本文本添加点击事件
cyj0919的博客
09-02 2223
注意，具体的代码实现可能会根据你使用的富文本编辑器和前端框架而有所不同，上述代码只是一个示例。请根据你实际使用的编辑器文档和API来进行相应的操作。要给富文本编辑器的文本增加点击事件，首先需要确定你使用的富文本编辑器是哪个。如果你使用的是其他富文本编辑器或者自己开发的富文本编辑器，可能需要参考其官方文档或者API来了解如何添加点击事件。确定要添加点击事件的文本区域或者元素，例如一个按钮、链接或者特定的文字部分。在编辑器初始化或者加载完成后，找到该元素，并给它绑定点击事件的监听器。
Taro支持富文本（微信小程序）完美解决
前端开发一枚
11-26 2497
需求：先说下需求，就是我们需要做活动页面，活动页面有个规则，规则的内容由B端后台配置海报页。页面如下 实现： 需要用到dangerouslySetInnerHTML属性即可，这个属性相比于其他方案的优势在于：1. 支持修改富文本样式 2. Taro官方属性，比插件靠谱 核心代码：index.tsx // 修改图片行内默认样式 (Taro as any).options.html.transformElement = (el) => { if (el.nodeName ..
安卓富文本部分高亮及点击事件
我怀里的猫的博客
10-20 1147
富文本其实不是很常用，但有遇到了过后使用很方便的场景，例如免责声明。这时候就很重要了，前段时间遇到了，自己重新整理了下方便以后找本文主要介绍了安卓富文本的实现方式。第一种是使用html格式的富文本，需要先创建一个html文件，然后使用WebView加载该文件以显示富文本。第二种是使用SpannableString，需要创建一个SpannableString对象，并设置需要高亮或点击的部分的起始和结束位置以及对应的点击事件。在设置完富文本后，需要将其设置到TextView或其他文本控件中以显示效果。
关于在taro使用wx.parse那些事
weixin_38168918的博客
08-20 2299
　　好久不见，好久没更新博客，最近工作也比较忙，今天在使用解决富文本的时候遇到两个bug，由于第一次使用wx.parse经验不足，走了很多弯路，今天特地把自己修复bug的感想分享一下，希望能帮助更多的小伙伴们，有错误的地方，请多多指教????。 　　首先在taro实现富文本的方式有多种，之前也是尝试过使用richText标签，但是感觉很不好用，一个原因是，每次要把原有后台返回的数据格式都要组...
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
a3212768093的博客
07-07 991
摘要：本文介绍了一个基于微信小程序原生editor组件封装的富文本编辑器实现方案。该组件主要功能包括：可配置的工具栏、双向数据绑定、图片上传和文本格式控制。关键技术点涉及编辑器实例管理、内容同步机制、图片处理流程和格式控制方法。组件采用Vue3+TypeScript开发，通过createSelectorQuery获取编辑器实例，实现了getContents/setContents的内容同步，并整合了图片选择和上传API。样式使用SCSS编写，包含编辑器容器和工具栏布局。注意事项包括服务器配置、样式限制和性能
基于taro + dva搭建小程序开发环境
webZRH的博客
07-23 321
参考网址https://www.jianshu.com/p/a6c693785a2e 运行报错 1、在系统中找到 node 全局模块目录 C:\Users\{用户}\AppData\Roaming\npm\node_modules\ 删除掉 tarojs 目录 或者C:\Users\Administrator\AppData\Roaming\npm\node_modules\ 2、npm cache clean -f 清理缓存 3、使用安装命令重新安装 链接：https://www.jians
Taro动态绑定事件
qq_45142260的博客
03-17 1019
给dom元素动态绑定事件
小程序中，给一段富文本字符串文案特殊内容加样式监听点击事件
最新发布
webZRH的博客
08-06 417
【代码】小程序中，给一段富文本字符串文案特殊内容加样式监听点击事件。
Taro3不使用wxParse渲染富文本
qq_43496650的博客
09-22 1307
Taro 可以不使用wxParse直接通过 Element#innerHTML 或 Vue 的 v-html 或 React/Nerv 的 dangerouslySetInnerHTML 直接渲染 HTML 详细请看 这里 但是有几个问题需要注意 1、页面重新render的时候dangerouslySetInnerHTML好像不会更新，如果一开始是空字符串的话可能会出现数据富文本渲染不出来的情况 2、如果富文本里面有图片，渲染出来的图片mode是scaleToFill，但这往往不符合我们的要求，可以使用Ta
微信小程序富文本解析点击图片放大_微信小程序解析富文本过程详解
weixin_39688170的博客
12-22 425
前言最近公司在开发OTA微信小程序，一些页面的详情内容是HTML富文本格式的的，但是微信小程序不能直接解析HTML，需要将内容中的HTML标签转换成微信小程序所支持的标签。开始的时候想过自己写方法来替换标签，后来找到了一个很好用的插件：WxParse。使用WxParse解析富文本数据1．将下载下来的插件文件夹复制到我们的项目根目录下(其中emojis文件可根据自己所需决定要或者不要，其他的文件必须...
富文本带点击事件的解决方案
weixin_33717298的博客
04-15 415
富文本带点击事件的解决方案 效果 分析 富文本中要添加点击link事件,需要深入到CoreText里面才能够解决,本人将TTTAttributedLabel进行了封装(封装并不完全,以后会继续完善),简化了操作. 源码 https://github.com/YouXianMing/UI-Component-Collection https...
wangeditor富文本的详细使用，wangeditor的基本配置
weixin_47756693的博客
03-14 2008
wangeditor富文本的详细使用。wangeditor的基本配置
vue 富文本字符串如何绑定事件并传参
为啥不能换名字的博客
07-26 887
可以通过冒泡的方式汇总到onRichtxt方法上onRichtxt内可以通过标签属性区分是哪个点击的。
微信小程序数据绑定和事件触发
qq_34185872的博客
06-18 3044
在这个例子中，inputValue 是一个变量，当用户在输入框中输入内容时，onInput 事件会被触发，将输入框中的值赋给 inputValue 变量，当用户离开输入框时，onBlur 事件会被触发，将输入框中的值赋给 inputValue 变量。单向绑定：单向绑定是指数据和视图之间的单向关联，当数据发生变化时，视图也会相应地发生变化，但是反过来不行。双向绑定：双向绑定是指数据和视图之间的双向关联，当数据发生变化时，视图也会相应地发生变化，反之亦然。小程序中的事件包括用户的点击、滑动、输入等操作。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值