---
name: "rich-text"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "rich-text - Rich text"
---

## rich-text

> [VERSION] Base Library >= 2.10.0

### Description

Rich text component for displaying HTML content

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `nodes` | `string` | No | - | Node list/HTML String |

#### Events

| Event | Type | Description |
| --- | --- | --- |
| `select` | `(event: RichTextSelectEvent) => void` | Fires when a tag inside the rich text is clicked |

**RichTextSelectEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"select"` |  |
| `detail` | `RichTextSelectDetail` |  |

### Examples

#### HTML string format

*index.tyml*

```xml
<view class="container">
  <rich-text nodes="{{htmlStr}}" />
</view>
```

*index.tyss*

```css
.container {
  padding: 20rpx;
}
```

*index.js*

```javascript
Page({
  data: {
    htmlStr: '<div style="padding:10px;"><h2 style="color:#333;">Title</h2><p style="color:#666;line-height:1.6;">This is a piece of <b style="color:red;">rich text</b> content</p></div>',
  },
});
```

#### Node array format

*index.tyml*

```xml
<view class="container">
  <rich-text nodes="{{nodeList}}" />
</view>
```

*index.tyss*

```css
.container {
  padding: 20rpx;
}
```

*index.js*

```javascript
Page({
  data: {
    nodeList: [
      {
        name: 'div',
        attrs: { style: 'padding:10px;' },
        children: [
          { type: 'text', text: 'Hello ' },
          {
            name: 'strong',
            attrs: { style: 'color:red;' },
            children: [{ type: 'text', text: 'RichText' }],
          },
        ],
      },
    ],
  },
});
```

#### Tag click event

*index.tyml*

```xml
<view class="container">
  <rich-text nodes="{{htmlStr}}" bindselect="onSelect" />
</view>
```

*index.tyss*

```css
.container {
  padding: 20rpx;
}
```

*index.js*

```javascript
Page({
  data: {
    htmlStr: '<div style="padding:10px;"><p>Click the link below to view console output:</p><a style="color:#007aff;text-decoration:underline;">Clickable link</a></div>',
  },
  onSelect(e) {
    console.log('Tag clicked:', e.detail.name, e.detail.attrs);
  },
});
```


## Trusted HTML Nodes and Attributes

The `class` and `style` attributes are globally supported, **the `id` attribute is not supported**.

| Node       | Attributes                                                                                                               |
| :--------- | ------------------------------------------------------------------------------------------------------------------------ |
| a          |                                                                                                                          |
| abbr       |                                                                                                                          |
| address    |                                                                                                                          |
| article    |                                                                                                                          |
| aside      |                                                                                                                          |
| b          |                                                                                                                          |
| bdi        |                                                                                                                          |
| bdo        | `dir`                                                                                                                    |
| big        |                                                                                                                          |
| blockquote |                                                                                                                          |
| br         |                                                                                                                          |
| caption    |                                                                                                                          |
| center     |                                                                                                                          |
| cite       |                                                                                                                          |
| code       |                                                                                                                          |
| col        | ` span` `width `                                                                                                         |
| colgroup   | ` span` `width `                                                                                                         |
| dd         |                                                                                                                          |
| del        |                                                                                                                          |
| div        |                                                                                                                          |
| dl         |                                                                                                                          |
| dt         |                                                                                                                          |
| em         |                                                                                                                          |
| fieldset   |                                                                                                                          |
| font       |                                                                                                                          |
| footer     |                                                                                                                          |
| h1         |                                                                                                                          |
| h2         |                                                                                                                          |
| h3         |                                                                                                                          |
| h4         |                                                                                                                          |
| h5         |                                                                                                                          |
| h6         |                                                                                                                          |
| header     |                                                                                                                          |
| hr         |                                                                                                                          |
| i          |                                                                                                                          |
| img        | `alt` `src` `height` `width`                                                                                             |
| ins        |                                                                                                                          |
| label      |                                                                                                                          |
| legend     |                                                                                                                          |
| li         |                                                                                                                          |
| mark       |                                                                                                                          |
| nav        |                                                                                                                          |
| ol         | `start` `type`                                                                                                           |
| p          |                                                                                                                          |
| pre        |                                                                                                                          |
| q          |                                                                                                                          |
| rt         |                                                                                                                          |
| ruby       |                                                                                                                          |
| s          |                                                                                                                          |
| section    |                                                                                                                          |
| small      |                                                                                                                          |
| span       |                                                                                                                          |
| strong     |                                                                                                                          |
| sub        |                                                                                                                          |
| sup        |                                                                                                                          |
| table      | `width`                                                                                                                  |
| tbody      |                                                                                                                          |
| td         | `colspan` `height` `rowspan` `width`                                                                                     |
| tfoot      |                                                                                                                          |
| th         | `colspan` `height` `rowspan` `width`                                                                                     |
| thead      |                                                                                                                          |
| tr         | `colspan` `height` `rowspan` `width`                                                                                     |
| tt         |                                                                                                                          |
| u          |                                                                                                                          |
| ul         |                                                                                                                          |
| video      | `src` `controls` `controlslist` `autoplay` `loop` `muted` `playsinline` `poster` `reload` `crossorigin` `width` `height` |
| pre        |                                                                                                                          |


### FAQ

#### How to add link navigation functionality to rich-text content?

You can achieve this via `event.detail` in the `bind:select` event, as shown below:

```html
<rich-text nodes="{{htmlContent}}" bind:select="handleSelect"></rich-text>
```

```js
Page({
  handleSelect(e) {
    console.log(e);
    // {
    //   type: "select",
    //   timeStamp: 10597,
    //   currentTarget: { offsetTop: 195, offsetLeft: 25, id: "", dataset: {} },
    //   target: { offsetTop: 195, offsetLeft: 25, id: "", dataset: {} },
    //   detail: {
    //     name: "a",
    //     attrs: { href: "http://example.com", style: "font-size: 30px;" },
    //   },
    // }
    // Access the clicked node info via e.detail, and get the link URL via e.detail.attrs.href
  },
});
```

#### Will there be conversion errors when there are multiple unclosed tags like img in an HTML string?

No, both closed and unclosed `img` tags are supported.