rich-text 富文本

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

属性说明

nodes

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

受信任的HTML节点属性说明

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

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例

<view class="rich-text">
    <view class="renders">
        <view class="renders_title">通过HTML String渲染</view>
        <view class="renders_view">
            <scroll-view scroll-y>
                <view class="cont">{{htmlSnip}}</view>
            </scroll-view>
            <button type="primary" bind:tap="renderHtml">渲染HTML</button>
            <block s-if="{{renderedByHtml}}">
                <!-- 基础库 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> -->    
            </block>
        </view>
    </view>
    <view class="renders">
        <view class="renders_title">通过节点渲染</view>
        <view class="renders_view">
            <scroll-view scroll-y>
                <view class="cont">{{nodeSnip}}</view>
            </scroll-view>
            <button type="primary" bind:tap="renderNode">渲染Node</button>
            <block s-if="{{renderedByNode}}" style="margin-bottom:.5rem;">
                <!-- 基础库 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> -->
            </block>
        </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>`;
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: {
        htmlSnip,
        nodeSnip,
        renderedByHtml: false,
        renderedByNode: false,
        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.'
            }]
        }]
    },
    renderHtml() {
        this.setData({
            renderedByHtml: true
        });
    },
    renderNode() {
        this.setData({
            renderedByNode: true
        });
    },
    enterCode(e) {
      this.setData({
          htmlSnip: e.detail.value
      });
    }
});

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 生效。

参考示例

参考示例 1

在开发者工具中预览效果

<view class="rich-text">
    <view class="renders">
        <view class="renders_title">通过HTML String渲染</view>
        <view class="renders_view">
            <scroll-view scroll-y>
                <view class="cont">{{htmlSnip}}</view>
            </scroll-view>
            <rich-text nodes="{{htmlSnip}}" selectable="true"></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

在开发者工具中预览效果

<view class="rich-text">
    <view class="renders">
        <view class="renders_title">通过节点渲染</view>
        <view class="renders_view">
            <scroll-view scroll-y>
                <view class="cont">{{nodeSnip}}</view>
            </scroll-view>
            <rich-text nodes="{{nodes}}" selectable="true">
            </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.'
            }]
        }]
    }
});