The rich-text component. It is supported starting from the 1.11.0 basic library. For earlier versions, compatibility handling is required. For details, see About the Mini-program Basic Library.
| Attribute | Type | Default value | Description | Minimum version |
|---|---|---|---|---|
| nodes | Array | [] | Only the node list is supported. | - |
The following events are supported by default:
- tap
- touchstart
- touchmove
- touchcancel
- touchend
- longtap
Note: The nodes attribute only supports the Array type. To support the HTML String type, you must convert the HTML String string to a nodes array by using mini-html-parser.
nodes
Currently, two types of nodes, which are distinguished by type, are supported: the element node and the text node.
Element node
| Attribute | Type | Description | Required |
|---|---|---|---|
| type | String | The node type, which defaults to node. | No |
| name | String | The label name, which supports certain trusted HTML nodes. | Yes |
| attrs | Object | The attribute, which supports certain trusted attributes and follows the Pascal naming convention. | No |
| children | Array | The list of child nodes, whose structure is the same as that of nodes. | No |
Text node
| Attribute | Type | Description | Required |
|---|---|---|---|
| type | String | Node type | Yes |
| text | String | The text of the word. | Yes |
Supported HTML nodes and attributes
The class and style attributes are supported, and the ID attribute is not supported.
| Node | Attribute |
|---|---|
| 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 | - |
Code sample
<!-- page.axml --><rich-text nodes="{{nodes}}" onTap="tap"></rich-text>
// page.jsPage({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')}})
Note: Only the following character entities are supported. Other character entities lead to rendering failure of components.
| Output | Description | Entity name |
|---|---|---|
| Space | ||
| < | Less-than sign | < |
| > | Greater-than sign | > |
| & | Ampersand | & |
| “ | Quotation mark | " |
| ‘ | Apostrophe | ' |