RichText

基础库 1.11.0 开始支持,低版本需做 兼容

rich-text 是一个富文本组件。

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

支持如下默认事件:

  • tap
  • touchstart
  • touchmove
  • touchcancel
  • touchend
  • longtap
    注意nodes 属性只支持使用 Array 类型。如果需要支持 HTML String,则需要自己将 HTML String转化为 nodes 数组,可使用 mini-html-parser 转换。

nodes

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

元素节点

属性名类型说明必填备注
typeString节点类型默认值为 node
nameString标签名支持部分受信任的HTML节点
attrsObject属性支持部分受信任的属性,遵循Pascal命名法
childrenArray子节点列表结构和nodes相同

文本节点

属性名类型说明必填备注
typeString节点类型
textString文本

支持的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

示例代码

  1. <!-- page.axml -->
  2. <rich-text nodes="{{nodes}}" onTap="tap"></rich-text>
  1. // page.js
  2. Page({
  3. data: {
  4. nodes: [{
  5. name: 'div',
  6. attrs: {
  7. class: 'test_div_class',
  8. style: 'color: green;'
  9. },
  10. children: [{
  11. type: 'text',
  12. text: 'Hello&nbsp;World! This is a text node.'
  13. }]
  14. }]
  15. },
  16. tap() {
  17. console.log('tap')
  18. }
  19. })

原文: https://docs.alipay.com/mini/component/rich-text