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