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.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')
}
})
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 | ' |