安装

tnpm install --save @alipay/adc-rich-pro

组件介绍

富文本组件，支持Html实体，全面的标签支持，支持图片点击和链接呗被点击事件，基于mp-html扩展。

参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: containerStyle | 否 | String | 容器style样式 | '' | 'padding:10rpx' content | 是 | String | 需要被渲染的Html内容 | '' | 'aaaa' loadingImg | 否 | String | 图片加载过程中的占位图链接 | '' | 'https://xxx.com/loadig.gif' errorImg | 否 | String | 图片出错时的占位图链接 | '' | 'https://xxx.com/err.gif' lazyLoad | 否 | Boolean | 是否开启图片懒加载 | false | true pauseVideo | 否 | Boolean | 是否在播放一个视频时自动暂停其他视频 | true | true previewImg | 否 | Boolean | 是否允许图片被点击时自动预览(若使用onImgTap自定义事件，需将此属性置为false) | true | false selectable | 否 | Boolean | 是否开启文本长按复制 | false | true showImgMenu | 否 | Boolean | 是否允许图片被长按时显示菜单 | true | false copyLink | 否 | Boolean | 是否允许外部链接被点击时自动复制 | false | false scrollTable | 否 | Boolean | 是否给每个表格添加一个滚动层使其能单独横向滚动 | false | false tagStyle | 否 | Object | 设置标签的默认样式 | false | {a: 'color:red'} useAnchor | 否 | Boolean | 是否使用锚点链接 | false | false markdown | 否 | Boolean | 是否支持markdown渲染 | false | false onLoad | 否 | Function | dom树加载完毕时 | null | (e)=>{} onReady | 否 | Function | 图片加载完毕时（不包含懒加载的图片） | null | (e)=>{} onError | 否 | Function | 发生渲染错误时 | null | (e)=>{} onImgTap | 否 | Function | 图片被点击时 | null | (e)=>{} onLinkTap | 否 | Function | 链接被点击时 | null | (e)=>{} onPlay | 否 | Function | 音视频播放时 | null | (e)=>{} onDidMount | 否 | Function | 获取富文本实例 | null | (e)=>{}

在小程序中使用

{
  "usingComponents": {
    "mas-adc-rich-pro": "@alipay/adc-rich-pro/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
  <mas-adc-rich-pro content="{{content}}" onLinkTap="onLinkTap" onImgTap="onImgTap"/>

Badges