千家信息网

微信小程序内容组件rich-text怎么使用

发表于:2025-01-19 作者:千家信息网编辑
千家信息网最后更新 2025年01月19日,今天小编给大家分享一下微信小程序内容组件rich-text怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获
千家信息网最后更新 2025年01月19日微信小程序内容组件rich-text怎么使用

今天小编给大家分享一下微信小程序内容组件rich-text怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

rich-text

基础库 1.4.0 开始支持,低版本需做兼容处理

富文本。

属性类型默认值说明最低版本
nodesArray / String[]节点列表 / HTML String1.4.0

支持默认事件,包括:taptouchstarttouchmovetouchcanceltouchendlongtap

nodes 属性推荐使用 Array 类型,由于组件会将 String 类型转换为 Array 类型,因而性能会有所下降

nodes

现支持两种节点,通过type来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的HTML节点

元素节点:type = node

属性说明类型必填备注
name标签名String支持部分受信任的HTML节点
attrs属性Object支持部分受信任的属性,遵循Pascal命名法
children子节点列表Array结构和nodes一致

文本节点:type = text

属性说明类型必填备注
text文本String支持entities

受信任的HTML节点及属性

全局支持class和style属性,不支持id属性

节点属性
a
abbr
b
blockquote
br
code
colspan,width
colgroupspan,width
dd
del
div
dl
dt
em
fieldset
h2
h3
h4
h5
h6
h7
hr
i
imgalt,src,height,width
ins
label
legend
li
olstart,type
p
q
span
strong
sub
sup
tablewidth
tbody
tdcolspan,height,rowspan,width
tfoot
thcolspan,height,rowspan,width
thead
tr
ul

示例:

// rich-text.jsPage({  data: {    nodes: [{      name: 'div',      attrs: {        class: 'div_class',        style: 'line-height: 60px; color: red;'      },      children: [{        type: 'text',        text: 'Hello World!'      }]    }]  },  tap() {    console.log('tap')  }})

Bug & Tip

  1. tip: nodes 不推荐使用 String 类型,性能会有所下降。

  2. tip:rich-text组件内屏蔽所有节点的事件。

  3. tip: attrs 属性不支持 id ,支持 class 。

  4. tip: name 属性大小写不敏感。

  5. tip: 如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除。

  6. tip: img 标签仅支持网络图片。

以上就是"微信小程序内容组件rich-text怎么使用"这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注行业资讯频道。

0