May 18, 2021 WeChat Mini Program Development Document
Base library 1.4.0 starts to support, and low versions need to be compatible
Rich text.
| Property | Type | The default | Description | The lowest version |
|---|---|---|---|---|
| nodes | Array / String | [] | List of nodes / HTML String | 1.4.0 |
Supports default events,
tap
touchstart
touchmove
touchcancel
touchend
longtap
The nodes property recommends the Array type, which is reduced because the component converts the String type to the Array type
nodes
There are two types of nodes supported, distinguished by type, namely element nodes and text nodes, the default is element nodes, HTML nodes displayed in the rich text area
Element node: type s node
| Property | Description | Type | Required | Note |
|---|---|---|---|---|
| name | The label name | String | Is | Supports partially trusted HTML nodes |
| attrs | Property | Object | Whether | Partially trusted properties are supported, following the Pascal nomenclat |
| children | The list of child nodes | Array | Whether | The structure is the same as the nodes |
Text node: type s text
| Property | Description | Type | Required | Note |
|---|---|---|---|---|
| text | Text | String | Is | Support for entity |
Trusted HTML nodes and properties
Class and style properties are globally supported, and id properties are not supported.
| Node | Property |
|---|---|
| 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 | |
| Ⅰ | |
| 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 |
Example:
<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// rich-text.js
Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}]
},
tap() {
console.log('tap')
}
})
tip
Nodes does not recommend the String type and performance decreases.
tip
Events that mask all nodes within the
rich-text
component.
tip
The attrs property does not support id, support class.
tip
Name property case is insensitive.
tip
If an untrusted HTML node is used, the node and all its children are removed.
tip
: The img tab only supports web images.