rich-text 是一個富文本組件。基礎庫 1.11.0 開始支援，低版本需做相容處理，操作參見 小程式基礎庫說明。
| 屬性名稱 | 類型 | 預設值 | 描述 | 最低版本 |
|---|---|---|---|---|
| nodes | Array | [] | 只支援 節點列表 | - |
預設支援如下事件：
- tap
- touchstart
- touchmove
- touchcancel
- touchend
- longtap
說明 nodes 屬性只支援使用 Array 類型。如果需要支援 HTML String，則需要自己將 HTML String 轉化為 nodes 數組，可使用 mini-html-parser 轉換。
nodes
現支援兩種節點，通過 type 來區分，分別是元素節點和文本節點。預設是元素節點，在富文本地區裡顯示 HTML 節點。
元素節點
| 屬性名稱 | 類型 | 說明 | 必填 |
|---|---|---|---|
| type | String | 節點類型，預設值為 node。 | 否 |
| name | String | 標籤名，支援部分受信任的 HTML節點 | 是 |
| attrs | Object | 屬性，支援部分受信任的屬性，遵循 Pascal 命名法 | 否 |
| children | Array | 子節點列表，結構和 nodes 相同 | 否 |
支援的 HTML 節點及屬性
支援 class 和 style 屬性，不支援 ID 屬性。
| 節點 | 屬性 |
|---|---|
| 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 | - |
程式碼範例
<!-- page.axml -->
<rich-text nodes="{{nodes}}" onTap="tap"></rich-text>// page.js
Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'test_div_class',
style: 'color: green;'
},
children: [{
type: 'text',
text: 'Hello World! This is a text node.'
}]
}]
},
tap() {
console.log('tap')
}
})說明 僅支援如下字元實體。其他字元實體會導致組件無法渲染。
| 顯示結果 | 描述 | 實體名稱 |
|---|---|---|
| 空格 | ||
| < | 小於符號 | < |
| > | 大於符號 | > |
| & | 和號 | & |
| “ | 引號 | " |
| ‘ | 撇號 | ' |
文本節點
| 屬性名稱 | 類型 | 說明 | 必填 |
|---|---|---|---|
| type | String | 節點類型 | 是 |
| text | String | 文本 | 是 |