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

 

posted @ 2018-11-07 10:46 网申 阅读(...) 评论(...) 编辑 收藏