html rich text,rich-text---组件，基础内容

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

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

nodes

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

元素节点：type = node

包含三个属性

name

attrs

children

文本节点：type = text

包含一个属性

text

代码说明

wxml

传入html字符串

传入节点列表

wxss

rich-text {

width: 700rpx;

padding: 25rpx 0;

}

.rich-text-wrp {

padding: 0 25rpx;

background-color: #fff;

}

.page-section{

width: 100%;

margin-bottom: 60rpx;

}

.page-section:last-child{

margin-bottom: 0;

}

.page-section-title{

font-size: 28rpx;

color: #999999;

margin-bottom: 10rpx;

padding-left: 30rpx;

padding-right: 30rpx;

}

js

Page({

data: {

html: '

Hello World!

',

nodes: [{

name: 'div',

attrs: {

class: 'div_class',

style: 'line-height: 60px; color: red;'

},

children: [{

type: 'text',

text: 'Hello World!'

}]

}]

},

tap() {

console.log('tap')

}

})

效果预览

image.png

控制台里面查看

image.png

分析,如果代码是这样，js里面多了一个attrs和children有什么影响

Page({

data: {

html: '

Hello World!

',

nodes: [{

name: 'div',

attrs: {

class: 'div_class',

style: 'line-height: 60px; color: red;'

},

attrs: {

class: 'div_class',

style: 'line-height: 60px; color: green;'

},

children: [{

type: 'text',

text: 'Hello World!'

}],

children: [{

type: 'text',

text: 'new Hello World!'

}]

}]

},

tap() {

console.log('tap')

}

})

新的效果预览

image.png

Bug & Tip

tip: nodes 不推荐使用 String 类型，性能会有所下降。

tip: rich-text 组件内屏蔽所有节点的事件。

tip: attrs 属性不支持 id ，支持 class 。

tip: name 属性大小写不敏感。

tip: 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。

tip: img 标签仅支持网络图片。

tip: 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。