微信小程序内容组件 rich-text

2017-07-20

rich-text

基础库 1.4.0 开始支持,低版本需做兼容处理

富文本。

属性类型默认值说明最低版本
nodesArray / String[]节点列表 / HTML String1.4.0

支持默认事件,包括:taptouchstarttouchmovetouchcanceltouchendlongtap

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


nodes

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

元素节点:type = node

属性说明类型必填备注
name标签名String支持部分受信任的HTML节点
attrs属性Object支持部分受信任的属性,遵循Pascal命名法
children子节点列表Array结构和nodes一致

文本节点:type = text

属性说明类型必填备注
text文本String支持entities

受信任的HTML节点及属性

全局支持class和style属性,不支持id属性

节点属性
a 
abbr 
b 
blockquote 
br 
code 
colspan,width
colgroupspan,width
dd 
del 
div 
dl 
dt 
em 
fieldset 
h1 
h2 
h3 
h4 
h5 
h6 
hr 
i 
imgalt,src,height,width
ins 
label 
legend 
li 
olstart,type
p 
q 
span 
strong 
sub 
sup 
tablewidth
tbody 
tdcolspan,height,rowspan,width
tfoot 
thcolspan,height,rowspan,width
thead 
tr 
ul 

示例:

<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// rich-text.js
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})

Bug & Tip

  1. tip: nodes 不推荐使用 String 类型,性能会有所下降。
  2. tip:rich-text组件内屏蔽所有节点的事件。
  3. tip: attrs 属性不支持 id ,支持 class 。
  4. tip: name 属性大小写不敏感。
  5. tip: 如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除。
  6. tip: img 标签仅支持网络图片。