rich-text 富文本

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

# 属性说明

属性名 类型 默认值 必填 说明 最低版本
nodes Array | String [] 节点列表 / HTML String
selectable Boolean false(基础库3.150.1以前版本)
true(基础库3.150.1及以后版本)
富文本是否可以长按选中,可用于复制,粘贴,长按搜索等场景。百度APP 11.10 以上
name 标签名 String 支持部分受信任的HTML节点
attrs 属性 Object 支持部分受信任的属性,遵循Pascal命名法
children 子节点列表 Array 结构和nodes一致
text 文本 String 支持entities
image-menu-prevent Boolean false 长按 img 标签中的图片时是否弹起默认菜单,只在初始化时有效,不能动态变更。 3.170.1

# nodes

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

说明
node 元素节点
text 文本节点

# 受信任的HTML节点属性说明

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

节点 属性
a
abbr -
b -
blockquote
br
code -
col span,width
colgroup span,width
dd
del
div -
dl -
dt -
em
fieldset -
h1 -
h2 -
h3 -
h4 -
h5 -
h6 -
hr
i -
img alt,src,height,width
ins -
label -
legend -
li
ol start,type
p
q -
span -
strong
sub -
sup -
table width
tbody -
td colspan,height,rowspan,width
tfoot
th colspan,height,rowspan,width
thead -
tr
ul -

# 示例

在开发者工具中预览效果

# 扫码体验

请使用百度APP扫码

# 代码示例 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" />
    </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 生效。