微信小程序內(nèi)容組件 rich-text

# rich-text

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

富文本。

space 的合法值

# nodes

現(xiàn)支持兩種節(jié)點(diǎn)，通過type來區(qū)分，分別是元素節(jié)點(diǎn)和文本節(jié)點(diǎn)，默認(rèn)是元素節(jié)點(diǎn)，在富文本區(qū)域里顯示的HTML節(jié)點(diǎn) 元素節(jié)點(diǎn)：type = node*

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

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

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

# Bug & Tip

1. tip: nodes 不推薦使用 String 類型，性能會(huì)有所下降。
2. tip: rich-text 組件內(nèi)屏蔽所有節(jié)點(diǎn)的事件。
3. tip: attrs 屬性不支持 id ，支持 class 。
4. tip: name 屬性大小寫不敏感。
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 生效。

# 示例代碼

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

JavaScript

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>
</div>
`

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

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">通過HTML String渲染</view>
      <view class="page-content">
        <scroll-view scroll-y>{{htmlSnip}}</scroll-view>
        <button style="margin: 30rpx 0" type="primary" bindtap="renderHtml">渲染HTML</button>
        <block wx:if="{{renderedByHtml}}">
          <rich-text nodes="{{htmlSnip}}"></rich-text>
        </block>
      </view>
    </view>

    <view class="page-section">
      <view class="page-section-title">通過節(jié)點(diǎn)渲染</view>
      <view class="page-content">
        <scroll-view scroll-y>{{nodeSnip}}</scroll-view>
        <button style="margin: 30rpx 0" type="primary" bindtap="renderNode">渲染Node</button>
        <block wx:if="{{renderedByNode}}">
          <rich-text nodes="{{nodes}}"></rich-text>
        </block>
      </view>
    </view>
  </view>

</view>