All Products
Search
Document Center

Rich text

Last Updated: Feb 04, 2021

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

  1. <!-- page.axml -->
  2. <rich-text nodes="{{nodes}}" onTap="tap"></rich-text>
  1. // page.js
  2. Page({
  3. data: {
  4. nodes: [{
  5. name: 'div',
  6. attrs: {
  7. class: 'test_div_class',
  8. style: 'color: green;'
  9. },
  10. children: [{
  11. type: 'text',
  12. text: 'Hello&nbsp;World! This is a text node.'
  13. }]
  14. }]
  15. },
  16. tap() {
  17. console.log('tap')
  18. }
  19. })

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 '