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

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