微信小程序 rich-text富文本框 怎么设置里面节点的样式

最新推荐文章于 2024-07-25 12:55:56 发布
最新推荐文章于 2024-07-25 12:55:56 发布
阅读量1.8k 收藏
点赞数
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/T3165919332/article/details/131477381
版权
文章讲述了在JavaScript中如何通过正则表达式来修改HTML内容，特别是针对没有类名的图片节点，将它们的宽度设置为100%，高度自动适应，以防止图片超出容器的边界。
摘要由CSDN通过智能技术生成

1、在JS中我们获取数据，在没有类名的情况下

使用正则匹配你想要添加演示的节点

 res[1].data[0].f_content为rich-text里面的节点

如图

 代码：让获取的节点中的图片的最大宽度为100%,高度为auto

this.content = res[1].data[0].f_content.replace(/\<img/gi, '<img style="width:100%";height:auto')

初始状态：图片超过div

        

 

效果：

 

T3165919332
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序获取rich-text（富文本）渲染内容高度，rich-text（富文本）里img 样式设置
hangGe0111的博客
04-30 1万+
1.背景： 在某些场景下，例如在某些详细信息内容展示数据量特别大的时候（有时候特别小），当数据量特别大的时候，需要做展示固定高度，展开更多内容完全展示，收起内容又还原。当内容特别少的时候，例如小于3行，不展示更多按钮。（小程序内容获取的时候是不能知道当前内容有几行的，可能有人会说，我知道字体大小一行内放几个字，几行就再乘以几，让后台算好，传两个字段，展开收起，分别用两个字段即可，理论上是可行的（...
uniapp和微信小程序修改rich-text里面图片样式，鸿蒙教程来袭
m0_60721649的博客
03-28 1424
+)((?]+)((?]+)((?]+)((?” $1’);
设置rich-text标签样式
小白白的博客
06-02 1747
rich-text标签里面的样式设置
修改rich-text富文本中图片样式方法
qq_60548632的博客
05-12 534
在uniapp项目开发中，富文本中的图片总是会超出屏幕宽度，但是去修改直接操作rich-text去css样式修改又没有作用！那么这个问题怎么解决呢？以上代码就可以轻松解决此问题了。喜欢的小伙伴可以点点关注！
微信小程序富文本标签rich-text
weixin_40856652的博客
06-18 5988
微信小程序富文本标签rich-text使用教程，图片没有样式的，导致图片会按照原始大小显示，超出界面，文本段落也没有缩进。样式混乱问题处理，做项目过程中，经常遇到需要在小程序中展示用富文本编辑器生成的内容。包含着各种HTML标签和样式。这就需要用到rich-text组件...
【微信小程序】text和rich-text组件的基本使用
hacker707的博客
10-02 5115
微信小程序之text和rich-text组件的基本使用，持续更新【微信小程序】系列专栏
小程序 rich-text 富文本回显 解决video节点不显示问题
IT技术宅-北方的刀郎
11-01 2316
letcontent = `<p><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594980742996&di=ecacd5a309ec53780fcc0b4eb10a2f49&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576.
微信小程序组件之rich-text，转义显示富文本操作
xiexikk的博客
12-11 6628
小程序的rich-text组件使用： 接口获取的数控 数据转义后 wxml结构 &amp;amp;amp;amp;amp;amp;lt;view class='content'&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;view class='in'&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;vie
微信小程序swiper轮播图 text文本 rich-text富文本
御夢的博客
06-17 927
微信小程序
微信小程序 富文本 rich-text组件
java1234的博客
05-26 1608
完整微信小程序(Java后端) 技术贴目录清单页面（必看） 富文本。 属性 类型 默认值 必填 说明 最低版本 nodes array/string [] 否 节点列表/HTML String 1.4.0 space string 否 显示连续空格 2.4.1 space 的合法值 值 说明 最低版本 ensp 中文字符空格一半大小 emsp 中文字符空格大小 nbsp 根据字体设置的空格大小 nodes 现支持两种节点，通过type来区分，分别是
微信小程序rich-text富文本用法实例分析
10-16
通过以上讲解，我们可以了解到`rich-text`组件是微信小程序中实现富文本展示的重要工具，但同时也需要谨慎处理安全性问题和性能优化。在实际开发中，根据需求选择合适的方式来使用`nodes`属性，并确保遵循微信小程序...
将富文本转为微信小程序rich-text组件支持的json格式wxapp-rich-text-master.zip
09-25
在微信小程序开发中，富文本显示是...了解以上知识点后，开发者可以有效地利用`wxapp-rich-text-master`项目来解决在微信小程序中展示富文本的问题。通过合理的转换和使用，可以实现丰富的文本展示效果，提升用户体验。
微信小程序 rich-text的使用方法
12-07
通过理解并掌握`<rich-text>`组件的使用方法，开发者可以在微信小程序中更灵活地展示富文本内容，提升用户体验。同时，注意安全性和性能优化，确保小程序的稳定运行。在开发过程中，如果遇到问题，可以参考官方文档...
微信小程序－新富文本解析
03-17
1. **富文本组件**：在微信小程序中，`<rich-text>`组件用于展示富文本内容。它可以接受一个包含HTML标签的字符串，然后将其转化为小程序内部的结构，从而展示出相应的样式和布局。 2. **安全问题**：由于富文本...
将富文本转为微信小程序richtext组件支持的json格式
08-10
总结来说，将富文本转换为微信小程序`rich-text`组件支持的JSON格式是微信小程序富文本展示的核心步骤。这个过程涉及到JavaScript编程、DOM操作、正则表达式、性能优化、安全防护等多个方面，需要开发者具备一定的...
【微信小程序实战教程】之微信小程序原生开发详解
柯晓楠
07-24 1331
在实际的项目开发中，小程序的内置组件不一定能满足所有的需求，为了实现更高效的代码复用，小程序还允许开发者自行扩充组件，这些由开发者自行设计的组件被称为自定义组件。在小程序中，每个组件都具有独立的逻辑空间，分别拥有自己的独立数据和setData方法调用。在使用自定义组件的小程序页面中，Exparser框架将接管所有的自定义组件注册和实例化。小程序的基础库中提供了Page和Component两个构造器，自定义组件使用的是Component构造器。
基于微信小程序的健康饮食系统/健康饮食管理系统
weixin_47958760的博客
07-24 1458
随着信息技术和网络技术的飞速发展，人类已进入全新信息化时代，传统管理技术已无法高效，便捷地管理信息。为了迎合时代需求，优化管理效率，各种各样的小程序应运而生，各行各业相继进入信息管理时代，健康饮食就是信息时代变革中的产物之一。 任何小程序都要遵循系统设计的基本流程，本小程序也不例外，同样需要经过市场进行调研，论文需求进行分析，概要设计，系统详细设计，测试和编码等步骤，设计并实现了微信小程序的健康饮食系统。小程序选用微信开发者与java语言，应用SSM框架， MySQL为后台数据库。系统主要包括应用管理；食物
微信小程序结合后端php发送模版消息
最新发布
quweiie的专栏
07-25 337
结合后端php,发送微信小程序模版消息
微信小程序rich-text
07-27
微信小程序中的rich-text组件用于展示富文本内容，支持显示HTML标签和样式。你可以在小程序的wxml文件中添加rich-text组件，并在对应的js文件中设置content属性来指定要显示的富文本内容。 例如，在wxml文件中添加rich-text组件： ```html <rich-text nodes="{{content}}"></rich-text> ``` 然后，在js文件中设置content属性，将要显示的富文本内容赋值给它： ```javascript Page({ data: { content: '<div style="color: red;">Hello, <strong>world!</strong></div>' } }) ``` 在上面的例子中，rich-text组件将会显示一个红色的文字"Hello, world!"，并且"world!"会以粗体显示。 需要注意的是，不是所有的HTML标签和样式都被支持。在微信小程序的官方文档中，你可以找到更详细的说明和支持列表。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值