【rich-text】 富文字元件說明
阿新 • • 發佈：2018-11-07
【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 生效。