百度智能小程序 富文本

rich-text 富文本

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

属性说明

nodes

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

受信任的 HTML 节点属性说明

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

示例 

在开发者工具中打开

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

<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}}" image-menu-prevent="true"></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>
  <img height="100px" width="100px" src="https://b.bdstatic.com/miniapp/images/demo-dog.png" rel="external nofollow"  />
</div>`;

Page({
    data: {
        htmlSnip
    }
});

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

<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 生效。
• Tip：未显示设置 preview 时会进行点击默认预览判断，建议显示设置 preview。