# rich-text

基礎(chǔ)庫(kù) 1.4.0 開(kāi)始支持，低版本需做 兼容處理。

富文本。

屬性	類型	默認(rèn)值	必填	說(shuō)明	最低版本
nodes	array/string	[]	否	節(jié)點(diǎn)列表/HTML String	1.4.0
space	string		否	顯示連續(xù)空格	2.4.1

space 的合法值

值	說(shuō)明	最低版本
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根據(jù)字體設(shè)置的空格大小

# 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) 元素節(jié)點(diǎn)：type = node*

屬性	說(shuō)明	類型	必填	備注
name	標(biāo)簽名	string	是	支持部分受信任的 HTML 節(jié)點(diǎn)
attrs	屬性	object	否	支持部分受信任的屬性，遵循 Pascal 命名法
children	子節(jié)點(diǎn)列表	array	否	結(jié)構(gòu)和 nodes 一致

文本節(jié)點(diǎn)：type = text*

屬性	說(shuō)明	類型	必填	備注
text	文本	string	是	支持entities

# 受信任的HTML節(jié)點(diǎn)及屬性

全局支持class和style屬性，不支持id屬性。

節(jié)點(diǎn)	屬性
a
abbr
address
article
aside
b
bdi
bdo	dir
big
blockquote
br
caption
center
cite
code
col	span，width
colgroup	span，width
dd
del
div
dl
dt
em
fieldset
font
footer
h1
h2
h3
h4
h5
h6
header
hr
i
img	alt，src，height，width
ins
label
legend
li
mark
nav
ol	start，type
p
pre
q
rt
ruby
s
section
small
span
strong
sub
sup
table	width
tbody
td	colspan，height，rowspan，width
tfoot
th	colspan，height，rowspan，width
thead
tr	colspan，height，rowspan，width
tt
u
ul

# Bug & Tip

1. tip: nodes 不推薦使用 String 類型，性能會(huì)有所下降。
2. tip: rich-text 組件內(nèi)屏蔽所有節(jié)點(diǎn)的事件。
3. tip: attrs 屬性不支持 id ，支持 class 。
4. tip: name 屬性大小寫(xiě)不敏感。
5. tip: 如果使用了不受信任的HTML節(jié)點(diǎn)，該節(jié)點(diǎn)及其所有子節(jié)點(diǎn)將會(huì)被移除。
6. tip: img 標(biāo)簽僅支持網(wǎng)絡(luò)圖片。
7. tip: 如果在自定義組件中使用 rich-text 組件，那么僅自定義組件的 wxss 樣式對(duì) rich-text 中的 class 生效。

# 示例代碼

在開(kāi)發(fā)者工具中預(yù)覽效果

JavaScript

const htmlSnip =
`

  
Title
  

    Life is like a box of
     chocolates.
  

`

const nodeSnip =
`Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'You never know what you're gonna get.'
      }]
    }]
  }
})
`

Page({
  onShareAppMessage() {
    return {
      title: 'rich-text',
      path: 'page/component/pages/rich-text/rich-text'
    }
  },

  data: {
    htmlSnip,
    nodeSnip,
    renderedByHtml: false,
    renderedByNode: false,
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: #1AAD19;'
      },
      children: [{
        type: 'text',
        text: 'You never know what you\'re gonna get.'
      }]
    }]
  },
  renderHtml() {
    this.setData({
      renderedByHtml: true
    })
  },
  renderNode() {
    this.setData({
      renderedByNode: true
    })
  },
  enterCode(e) {
    console.log(e.detail.value)
    this.setData({
      htmlSnip: e.detail.value
    })
  }
})

 WXML

  
    
      通過(guò)HTML String渲染
      
        {{htmlSnip}}
        渲染HTML
        
          
        
      
    

    
      通過(guò)節(jié)點(diǎn)渲染
      
        {{nodeSnip}}
        渲染Node
        
          
        
      
    
  

網(wǎng)站標(biāo)題：創(chuàng)新互聯(lián)小程序教程：微信小程序內(nèi)容組件rich-text
網(wǎng)站地址：http://www.5511xx.com/article/dhjssde.html