百度智能小程序 富文本

2020-08-28 15:38 更新

rich-text 富文本

解釋?zhuān)?富文本,nodes 屬性推薦使用 Array 類(lèi)型,由于組件會(huì)將 String 類(lèi)型轉(zhuǎn)換為 Array 類(lèi)型,因而性能會(huì)有所下降。

屬性說(shuō)明

屬性名類(lèi)型默認(rèn)值必填說(shuō)明最低版本

nodes

Array | String

[]

節(jié)點(diǎn)列表 / HTML String

selectable

Boolean

false(基礎(chǔ)庫(kù) 3.150.1 以前版本)
true(基礎(chǔ)庫(kù) 3.150.1 及以后版本)

富文本是否可以長(zhǎng)按選中,可用于復(fù)制,粘貼,長(zhǎng)按搜索等場(chǎng)景。百度 APP 11.10 以上

name

標(biāo)簽名

String

支持部分受信任的 HTML 節(jié)點(diǎn)

attrs

屬性

Object

支持部分受信任的屬性,遵循 Pascal 命名法

children

子節(jié)點(diǎn)列表

Array

結(jié)構(gòu)和 nodes 一致

text

文本

String

支持 entities

image-menu-prevent

Boolean

false

阻止長(zhǎng)按圖片時(shí)彈起默認(rèn)菜單(即將該屬性設(shè)置為 image-menu-prevent="true"image-menu-prevent),只在初始化時(shí)有效,不能動(dòng)態(tài)變更;若不想阻止彈起默認(rèn)菜單,則不需要設(shè)置此屬性。

3.170.1

preview

Boolean

富文本中的圖片是否可點(diǎn)擊預(yù)覽。在不設(shè)置的情況下,若 rich-text 未監(jiān)聽(tīng)點(diǎn)擊事件,則默認(rèn)開(kāi)啟。

3.170.9

nodes

現(xiàn)支持兩種節(jié)點(diǎn),通過(guò) type 來(lái)區(qū)分,分別是 元素節(jié)點(diǎn) 和 文本節(jié)點(diǎn) ,默認(rèn)是元素節(jié)點(diǎn),在富文本區(qū)域里顯示的 HTML 節(jié)點(diǎn)。

說(shuō)明

node

元素節(jié)點(diǎn)

text

文本節(jié)點(diǎn)

受信任的 HTML 節(jié)點(diǎn)屬性說(shuō)明

全局支持 class 和 style 屬性,不支持 id 屬性。
節(jié)點(diǎn)屬性

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

-

示例 

在開(kāi)發(fā)者工具中打開(kāi)


代碼示例 1: 通過(guò) HTML String 渲染

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">通過(guò)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">
            <!-- 基礎(chǔ)庫(kù) 3.150.1 以前的版本,selectable 屬性默認(rèn)為 false,期望文本不可被選中時(shí)不用設(shè)置此屬性 -->
            <rich-text nodes="{{htmlSnip}}" image-menu-prevent="true"></rich-text>
            <!-- 基礎(chǔ)庫(kù) 3.150.1 及以后版本,selectable 屬性默認(rèn)為 true,期望文本不可被選中時(shí)需設(shè)置此屬性為 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: 通過(guò)節(jié)點(diǎn)渲染

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">通過(guò)節(jié)點(diǎn)渲染</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">
            <!-- 基礎(chǔ)庫(kù) 3.150.1 以前的版本,selectable 屬性默認(rèn)為 false,期望文本不可被選中時(shí)不用設(shè)置此屬性 -->
            <rich-text nodes="{{nodes}}"></rich-text>
            <!-- 基礎(chǔ)庫(kù) 3.150.1 及以后版本,selectable 屬性默認(rèn)為 true,期望文本不可被選中時(shí)需設(shè)置此屬性為 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:?jiǎn)螕舸颂?,查看?nbsp;富文本字符串轉(zhuǎn)成 json 格式 的具體方法。
  • Tip:支持默認(rèn)事件,包括:tap、touchstart、touchmove、touchcancel、touchend 和 longtap。
  • Tip:nodes 不推薦使用 String 類(lèi)型,性能會(huì)有所下降。
  • Tip:rich-text 組件內(nèi)屏蔽所有節(jié)點(diǎn)的事件。
  • Tip:attrs 屬性不支持 id,支持 class。
  • Tip:name 屬性大小寫(xiě)不敏感。
  • Tip:如果使用了不受信任的 HTML 節(jié)點(diǎn),該節(jié)點(diǎn)及其所有子節(jié)點(diǎn)將會(huì)被移除。
  • Tip:img 標(biāo)簽僅支持網(wǎng)絡(luò)圖片。
  • Tip:如果在自定義組件中使用 rich-text 組件,那么僅自定義組件的 swan 樣式對(duì) rich-text 中的 class 生效。
  • Tip:未顯示設(shè)置 preview 時(shí)會(huì)進(jìn)行點(diǎn)擊默認(rèn)預(yù)覽判斷,建議顯示設(shè)置 preview。


以上內(nèi)容是否對(duì)您有幫助:
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)