webUrl: https://qft12m.smartapps.cn/component/rich-text/rich-text

title: rich-text 富文本 header: develop nav: component sidebar: base_rich-text

webUrl: https://qft12m.smartapps.cn/component/rich-text/rich-text

解释： 富文本，nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降。

属性说明

nodes

现支持两种节点，通过type来区分，分别是 元素节点 和 文本节点 ，默认是元素节点，在富文本区域里显示的HTML节点。

受信任的HTML节点属性说明

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

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例 1: 通过HTML String渲染

:::codeTab

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">通过HTML String渲染</view>
        <view class="description">代码示例</view>
        <scroll-view scroll-y>
            <view class="cont border-bottom">{{htmlSnip}}</view>
        </scroll-view>
        <view class="description">渲染效果</view>
        <view class='rich-text'>
            <!-- 基础库 3.150.1 以前的版本，selectable 属性默认为 false，期望文本不可被选中时不用设置此属性 -->
            <rich-text nodes="{{htmlSnip}}"></rich-text>
            <!-- 基础库 3.150.1 及以后版本，selectable 属性默认为 true，期望文本不可被选中时需设置此属性为 false -->
            <!-- <rich-text selectable="false" nodes="{{htmlSnip}}"></rich-text> -->
        </view>
    </view>
</view>

const htmlSnip
=`<div class="div_class">
  <h1>Title</h1>
  <p class="p">
    Life is&nbsp;<i>like</i>&nbsp;a box of
    <b>&nbsp;chocolates</b>
  </p>
</div>`;
Page({
    data: {
        htmlSnip
    }
});

:::

代码示例 2: 通过节点渲染

:::codeTab

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">通过节点渲染</view>
        <view class="description">代码示例</view>
        <scroll-view scroll-y>
            <view class="cont border-bottom">{{nodeSnip}}</view>
        </scroll-view>
        <view class="description">渲染效果</view>
        <view class='rich-text'>
            <!-- 基础库 3.150.1 以前的版本，selectable 属性默认为 false，期望文本不可被选中时不用设置此属性 -->
            <rich-text nodes="{{nodes}}"></rich-text>
            <!-- 基础库 3.150.1 及以后版本，selectable 属性默认为 true，期望文本不可被选中时需设置此属性为 false -->
            <!-- <rich-text selectable="false" nodes="{{nodes}}"></rich-text> -->
        </view>
    </view>
</view>

const nodeSnip
=`
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: #4F99FB;;'
      },
      children: [{
        type: 'text',
        text: 'You never know what you're gonna get.'
      }]
    }]
  }
})`;
Page({
    data: {
        nodeSnip,
        nodes: [{
            name: 'div',
            attrs: {
                class: 'div_class',
                style: 'line-height: 60px; color: #4F99FB;'
            },
            children: [{
                type: 'text',
                text: 'You never know what you\'re gonna get.'
            }]
        }]
    }
});

:::

Bug & Tip

• Tip：单击此处，查看将富文本字符串转成 json 格式的具体方法。
• Tip：支持默认事件，包括：tap、touchstart、touchmove、touchcancel、touchend和longtap。
• Tip：nodes 不推荐使用 String 类型，性能会有所下降。
• Tip：rich-text 组件内屏蔽所有节点的事件。
• Tip：attrs 属性不支持 id，支持 class。
• Tip：name 属性大小写不敏感。
• Tip：如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
• Tip：img 标签仅支持网络图片。
• Tip：如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 swan 样式对 rich-text 中的 class 生效。