【rich-text】 富文本组件说明

时间:2023-01-12 09:21:08

【rich-text】 富文本组件可以显示HTML代码样式。

1)支持事件:tap、touchstart、touchmove、touchcancel、touchend和longtap

2)信任的HTML节点及属性

a
abbr
b
blockquote
br
code
col span,width
colgroup span,width
dd
del
div
dl
dt
em
fieldset
h1
h2
h3
h4
h5
h6
hr
i
img alt,src,height,width (仅支持网络图片)
ins
label
legend
li
ol start,type
p
q
span
strong
sub
sup
table width
tbody
td colspan,height,rowspan,width
tfoot
th colspan,height,rowspan,width
thead
tr
ul

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

<!-- 以下代码中 <h11>你好!中国</h11> 将会删除,h11不受信任-->
<rich-text nodes="<h11>你好!中国</h11><h3>ffff</h3>">
</rich-text>

原型:

<rich-text nodes="[Array | HTML String]">
</rich-text>

属性nodes类型:

rich-text属性nodes默认值为:[],值类型为数组或者HTML字符串,但推荐使用数组。

一)nodes值为[HTML String]

<rich-text nodes="<h1>你好!中国</h1>"></rich-text>

二)nodes值为[Array](其实是将html节点用数组、JSON表现的一种形式)

nodes取值为[Array]时,采用元素节点和文本节点来表现HTML节点。

示例:

[{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
// 以下是文本节点表现形式
type: 'text',
text: 'Hello&nbsp;World!'
}]
}
// 此处可追加更多元素节点或文本节点
]

上述代码中,同时包括了元素节点与文本节点。

元素节点设置说明如下:

键名 类型 是否必需 说明
name [String] 标签名,支持部分受信任的HTML节点(见上方信任标签列表)
attr [Object] 元素节点属性,支持部分受信任的属性,支持class和style属性,不支持id属性,遵循Pascal命名法(见上方信任标签列表,比如img支持属性alt,src,height,width)
children [Object] 子节点列表,结构和nodes一致

文本节点设置说明如下:

键名 类型 是否必须 说明
type [String] 值为text表明该节点为文本节点
text [HTML String] HTML字符串,支持entities

官网完整示例:https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

注意:

1)nodes 不推荐使用 String 类型,性能会有所下降。
2)rich-text 组件内屏蔽所有节点的事件。
3)attrs 属性不支持 id ,支持 class 。
4)name 属性大小写不敏感。
5)如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除。
6)img 标签仅支持网络图片。
7)如果在自定义组件中使用 rich-text 组件,那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。