rich-text 富文本

解釋：富文本。

創(chuàng)新互聯(lián)主要從事網(wǎng)站制作、網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)沙市,10多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

屬性說明

屬性名	類型	默認值	必填	說明	最低版本
nodes	Array/String	[]	否	節(jié)點列表/HTML String 。推薦使用 Array 類型，由于組件會將 String 類型轉(zhuǎn)換為 Array 類型，性能有所下降
selectable	Boolean	false（基礎(chǔ)庫 3.150.1 以前版本） true（基礎(chǔ)庫 3.150.1 及以后版本）	否	富文本是否可以長按選中，可用于復(fù)制，粘貼，長按搜索等場景	百度 App 11.10
image-menu-prevent	Boolean	false	否	阻止長按圖片時彈起默認菜單（將該屬性設(shè)置為`image-menu-prevent`或`image-menu-prevent=”true”`），只在初始化時有效，不能動態(tài)變更；若不想阻止彈起默認菜單，則不需要設(shè)置此屬性	3.170.1
preview	Boolean		否	富文本中的圖片是否可點擊預(yù)覽。在不設(shè)置的情況下，若 rich-text 未監(jiān)聽點擊事件，則默認開啟。未顯示設(shè)置 preview 時會進行點擊默認預(yù)覽判斷，建議顯示設(shè)置 preview	3.170.9

nodes

現(xiàn)支持兩種節(jié)點，通過 type 來區(qū)分，分別是“元素節(jié)點”和“文本節(jié)點”，默認是元素節(jié)點，在富文本區(qū)域里顯示的 HTML 節(jié)點。
元素節(jié)點 - type: ‘node’

屬性名	類型	必填	說明
name	String	是	標簽名。支持部分受信任的 HTML 節(jié)點，大小寫不敏感
attrs	Object	否	屬性。支持部分受信任的屬性，遵循 Pascal 命名法。不支持 id ，支持 class
children	Array	否	子節(jié)點列表。結(jié)構(gòu)和 nodes 一致

文本節(jié)點 - type: ‘text’

屬性名	類型	默認值	必填	說明	最低版本
text	String		是	文本。支持 entities ，例如：`<Life> is like a box of chocolates`

受信任的 HTML 節(jié)點以及屬性說明

1.全局支持 class 和 style 屬性，不支持 id 屬性。
2.如果使用了不受信任的 HTML 節(jié)點，該節(jié)點及其所有子節(jié)點將會被移除。

節(jié)點	屬性	節(jié)點	屬性	節(jié)點	屬性
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

示例

跳轉(zhuǎn)編輯工具

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

在 WEB IDE 中打開

掃碼體驗

代碼示例

請使用百度APP掃碼

代碼示例 1：通過 HTML String 渲染

SWAN
JS

 
 
 
  
  
    
  
     
  
   通過HTML String渲染  
  
   代碼示例  
  
     
  
   {{htmlSnip}}  
  
     
  
   渲染效果

代碼示例 2：通過節(jié)點渲染

SWAN
JS

 
 
 
  
  
    
  
     
  
   通過節(jié)點渲染  
  
   代碼示例  
  
     
  
   {{nodeSnip}}  
  
     
  
   渲染效果

Bug & Tip

Tip：查看將富文本字符串轉(zhuǎn)成 JSON 格式的具體方法。
Tip：支持默認事件，包括：tap、touchstart、touchmove、touchcancel、touchend 和 longtap 。
Tip：rich-text 組件內(nèi)屏蔽所有節(jié)點的事件。
Tip：內(nèi)部 img 標簽僅支持網(wǎng)絡(luò)圖片。
Tip：如果在自定義組件中使用 rich-text 組件，那么僅自定義組件的 swan 樣式對 rich-text 中的 class 生效。

分享標題：創(chuàng)新互聯(lián)百度小程序教程：rich-text富文本
新聞來源：http://m.fisionsoft.com.cn/article/dhjcdcp.html

新聞中心