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
preview Boolean 富文本中的图片是否可点击预览。在不设置的情况下,若 rich-text 未监听点击事件,则默认开启。 3.170.9

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