【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 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 生效。