W3Cschool
恭喜您成為首批注冊(cè)用戶(hù)
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
解釋?zhuān)?富文本,nodes 屬性推薦使用 Array 類(lèi)型,由于組件會(huì)將 String 類(lèi)型轉(zhuǎn)換為 Array 類(lèi)型,因而性能會(huì)有所下降。
屬性名 | 類(lèi)型 | 默認(rèn)值 | 必填 | 說(shuō)明 | 最低版本 |
---|---|---|---|---|---|
nodes | Array | String | [] | 否 | 節(jié)點(diǎn)列表 / HTML String | |
selectable | Boolean | false(基礎(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è)置為 | 3.170.1 |
preview | Boolean | 否 | 富文本中的圖片是否可點(diǎn)擊預(yù)覽。在不設(shè)置的情況下,若 rich-text 未監(jiān)聽(tīng)點(diǎn)擊事件,則默認(rèn)開(kāi)啟。 | 3.170.9 |
現(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) |
全局支持 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 <i>like</i> a box of
<b> 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.'
}]
}]
}
});
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話(huà):173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: