rich-text 富文本

富文本。

注意:

  • 富文本里面写 js 不支持事件执行。
  • rich-text 支持 a 标签,不支持超链接。

扫码体验

image.png

示例代码

<!-- API-DEMO page/component/rich-text.axml -->
<view>
  <rich-text nodes="{{nodes}}" onTap="tap"></rich-text>
</view>
// API-DEMO page/component/rich-text.js
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'wrapper',
        style: 'color: orange;',
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!',
      }],
    }],
  },
  tap() {
    console.log('tap');
  },
});
/* API-DEMO page/component/rich-text.acss */
.wrapper {
  padding: 20rpx;
}

属性

属性名类型默认值描述
nodesArray[]节点列表

注意:

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

支持如下默认事件:

  • tap
  • touchstart
  • touchmove
  • touchcancel
  • touchend
  • longtap

nodes 属性

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

元素节点

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

受信任的 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

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

显示结果描述实体名称
空格&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
"引号&quot;
'撇号&apos;

文本节点

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