小程序开发之组件rich-text（富文本）

rich-text

富文本效果展示

富文本格式（Rich Text Format, 一般简称为RTF）：多文本格式，由未格式化文本、控制字、控制符号和组组成。为了更容易的转换，一个标准的RTF文件应该仅包含7位ASCII码字符，RTF文件没有限制文件的行的最大长度。

• 普通的txt文件是不能显示格式的。
• 富文本格式rtf文件可以显示出很多格式信息。

=
富文本的作用：比如可以在一个文本中包含不同的颜色、不同的字号、不用的背景颜色的文本

rich-text属性

space 有效值：

space 有效值：

注：
富文本支持默认事件，包括：tap、touchstart、touchmove、touchcancel、touchend和longtap

nodes

nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降

nodes现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点

元素节点：type = node

文本节点：type = text

受信任的HTML节点及属性

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

Bug & Tip
1.tip: nodes 不推荐使用 String 类型，性能会有所下降。
2.tip: rich-text 组件内屏蔽所有节点的事件。
3.tip: attrs 属性不支持 id ，支持 class 。
4.tip: name 属性大小写不敏感。
5.tip: 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
6.tip: img 标签仅支持网络图片。
7.tip: 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。

例如：
效果展示

代码
index.wxml

<view class="pageView">
  <view class="page_title">传入html字符串</view>
  <view class="richtextView">
    <rich-text nodes="{{html1}}" bindtap="tap"></rich-text>
  </view>
</view>

<view class="pageView">
  <view class="page_title">传入html字符串</view>
  <view class="richtextView">
    <rich-text nodes="{{html2}}" bindtap="tap"></rich-text>
  </view>
</view>

<view class="pageView">
  <view class="page_title">传入节点列表</view>
  <view class="richtextView">
    <rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
  </view>
</view>

index.wxss

.pageView{
  width: 100%;
  margin-bottom: 60rpx;
}
.page_title{
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}
.richtextView {
  padding: 0 25rpx;
  background-color: #fff;
}

rich-text {
  width: 700rpx;
  padding: 25rpx 0;
}

index.js

Page({
  data: {
    html1: '<div class="div_class" style="line-height: 60px; color: red;">Hello&nbsp;World!????</div>',
    html2:
    `<div>
       <span>请说出你最喜欢最喜欢的明星？</span>
          <ul>
            <li>易烊千玺♂ ????</li>
            <li>迪丽热巴♀  ???? </li>
          </ul>
     </div>`,

    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})