• 下载
  • 社区

rich-text 富文本

版本要求:基础库 1.11.0 或更高版本;若版本较低,建议做 兼容处理

富文本。

扫码体验

richqr.png

效果示例

rich.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;
}

属性

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

注意:

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

支持如下默认事件:

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

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

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

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

文本节点

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

常见问题

rich-text 是否支持 a 标签 、超链接?

支持 a 标签,不支持超链接。

富文本里面写 js 是否支持事件执行呢?

不支持。