【rich-text】 富文本組件說明


【rich-text】 富文本組件可以顯示HTML代碼樣式。

1)支持事件:tap、touchstart、touchmove、touchcancel、touchend和longtap

2)信任的HTML節點及屬性

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

如果使用了不受信任的HTML節點,該節點及其所有子節點將會被移除。

<!-- 以下代碼中 <h11>你好!中國</h11> 將會刪除,h11不受信任-->
<rich-text nodes="<h11>你好!中國</h11><h3>ffff</h3>">
</rich-text>

 

原型:

<rich-text nodes="[Array | HTML String]">
</rich-text>

 

屬性nodes類型:

rich-text屬性nodes默認值為:[],值類型為數組或者HTML字符串,但推薦使用數組。

一)nodes值為[HTML String]

<rich-text nodes="<h1>你好!中國</h1>"></rich-text>

 

二)nodes值為[Array](其實是將html節點用數組、JSON表現的一種形式)

nodes取值為[Array]時,采用元素節點和文本節點來表現HTML節點。

示例:

[{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
// 以下是文本節點表現形式 type:
'text', text: 'Hello&nbsp;World!' }] }
// 此處可追加更多元素節點或文本節點
]

上述代碼中,同時包括了元素節點與文本節點。

 

元素節點設置說明如下:

鍵名 類型 是否必需 說明
name [String] 標簽名,支持部分受信任的HTML節點(見上方信任標簽列表)
attr [Object] 元素節點屬性,支持部分受信任的屬性,支持class和style屬性,不支持id屬性,遵循Pascal命名法(見上方信任標簽列表,比如img支持屬性alt,src,height,width
children [Object] 子節點列表,結構和nodes一致

 

文本節點設置說明如下:

鍵名 類型 是否必須 說明
type [String] 值為text表明該節點為文本節點
text [HTML String] HTML字符串,支持entities

 

官網完整示例:https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

 

注意:

1)nodes 不推薦使用 String 類型,性能會有所下降。
2)rich-text 組件內屏蔽所有節點的事件。
3)attrs 屬性不支持 id ,支持 class 。
4)name 屬性大小寫不敏感。
5)如果使用了不受信任的HTML節點,該節點及其所有子節點將會被移除。
6)img 標簽僅支持網絡圖片。
7)如果在自定義組件中使用 rich-text 組件,那么僅自定義組件的 wxss 樣式對 rich-text 中的 class 生效。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM