---
name: "rich-text"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "rich-text - 富文本"
---

## rich-text

> [VERSION] 基础库 >= 2.10.0

### 描述

富文本组件，用于展示 HTML 内容。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `nodes` | `string` | 否 | - | 节点列表/HTML String |

#### 事件

| 事件名 | 类型 | 描述 |
| --- | --- | --- |
| `select` | `(event: RichTextSelectEvent) => void` | 点击富文本内标签时触发 |

**RichTextSelectEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"select"` |  |
| `detail` | `RichTextSelectDetail` |  |

### 示例代码

#### HTML 字符串格式

*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;">标题</h2><p style="color:#666;line-height:1.6;">这是一段<b style="color:red;">富文本</b>内容</p></div>',
  },
});
```

#### 节点数组格式

*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' }],
          },
        ],
      },
    ],
  },
});
```

#### 点击标签事件

*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>点击下方链接查看控制台输出:</p><a style="color:#007aff;text-decoration:underline;">可点击的链接</a></div>',
  },
  onSelect(e) {
    console.log('点击标签:', e.detail.name, e.detail.attrs);
  },
});
```


## 受信任的 HTML 节点及属性

全局支持 class 和 style 属性，**不支持 id 属性**。

| 节点       | 属性                                                                                                                     |
| :--------- | ------------------------------------------------------------------------------------------------------------------------ |
| 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        |                                                                                                                          |


### 常见问题

#### 如何为 rich-text 富文本添加链接跳转功能？

可通过 `bing:select` 事件中 event.detail 实现，如下：

```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;" },
    //   },
    // }
    // 通过 e.detail 获取到当前点击的节点信息，可通过 e.detail.attrs.href 获取到链接地址
  },
});
```

#### HTML String 中存在多个 如 img 标签且不闭合时，会不会出现转换错误？

不会，我们支持 `img` 标签闭合或不闭合均兼容