如何实现富文本组件rich-text_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

rich-text 是一个富文本组件。基础库 1.11.0 开始支持，低版本需做兼容处理，操作参见小程序基础库说明。

属性名	类型	默认值	描述	最低版本

属性名	类型	默认值	描述	最低版本
nodes	Array	[]	只支持节点列表	-

默认支持如下事件：

tap
touchstart
touchmove
touchcancel
touchend
longtap

说明

：nodes 属性只支持使用 Array 类型。如果需要支持 HTML String，则需要自己将 HTML String 转化为 nodes 数组，可使用 mini-html-parser 转换。

nodes

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

元素节点

属性名	类型	说明	必填

属性名	类型	说明	必填
type	String	节点类型，默认值为 node。	否
name	String	标签名，支持部分受信任的 HTML节点	是
attrs	Object	属性，支持部分受信任的属性，遵循 Pascal 命名法	否
children	Array	子节点列表，结构和 nodes 相同	否

支持的 HTML 节点及属性

支持 class 和 style 属性，不支持 ID 属性。

节点	属性

节点	属性
a	-
abbr	-
b	-
blockquote	-
br	-
code	-
col	span, width
colgroup	span, width
dd	-
del	-
div	-
dl	-
dt	-
em	-
fieldset	-
h1	-
h2	-
h3	-
h4	-
h5	-
h6	-
hr	-
i	-
img	alt, src, height, width
ins	-
label	-
legend	-
li	-
ol	start, type
p	-
q	-
span	-
strong	-
sub	-
sup	-
table	width
tbody	-
td	colspan, height, rowspan, width
tfoot	-
th	colspan, height, rowspan, width
thead	-
tr	-
ul	-

代码示例

<!-- page.axml -->
<rich-text nodes="{{nodes}}" onTap="tap"></rich-text>

// page.js
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'test_div_class',
        style: 'color: green;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World! This is a text node.'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})

说明

：仅支持如下字符实体。其他字符实体会导致组件无法渲染。

显示结果	描述	实体名称

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
&	和号	&
“	引号	"
‘	撇号	'

文本节点

属性名	类型	说明	必填

属性名	类型	说明	必填
type	String	节点类型	是
text	String	文本	是