rich-text 富文本

解释：富文本。

属性说明

属性名类型默认值必填说明最低版本

nodes

Array/String

[]

否

节点列表/HTML String 。推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，性能有所下降

selectable

Boolean

false（基础库 3.150.1 以前版本）
true（基础库 3.150.1 及以后版本）

否

富文本是否可以长按选中，可用于复制，粘贴，长按搜索等场景

百度 App 11.10

image-menu-prevent

Boolean

false

否

阻止长按图片时弹起默认菜单（将该属性设置为image-menu-prevent或image-menu-prevent=”true”），只在初始化时有效，不能动态变更；若不想阻止弹起默认菜单，则不需要设置此属性

3.170.1

preview

Boolean

否

富文本中的图片是否可点击预览。在不设置的情况下，若 rich-text 未监听点击事件，则默认开启。未显示设置 preview 时会进行点击默认预览判断，建议显示设置 preview

3.170.9

nodes

现支持两种节点，通过 type 来区分，分别是“元素节点”和“文本节点”，默认是元素节点，在富文本区域里显示的 HTML 节点。
元素节点 - type: ‘node’

属性名类型默认值必填说明最低版本
nameString是标签名。支持部分受信任的 HTML 节点，大小写不敏感
attrsObject否属性。支持部分受信任的属性，遵循 Pascal 命名法。不支持 id ，支持 class
childrenArray否子节点列表。结构和 nodes 一致

文本节点 - type: ‘text’

属性名类型默认值必填说明最低版本
textString是文本。支持 entities ，例如：<p>&lt;Life&gt; is&nbsp;<i>like</i>&nbsp;a box of<b>&nbsp;chocolates</b></p>

受信任的 HTML 节点以及属性说明

1.全局支持 class 和 style 属性，不支持 id 属性。
2.如果使用了不受信任的 HTML 节点，该节点及其所有子节点将会被移除。

节点属性节点属性节点属性

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

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

百度智能小程序

请使用百度APP扫码

代码示例 1：通过 HTML String 渲染

  • SWAN
  • JS
  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">通过HTML String渲染</view>
  4.         <view class="description">代码示例</view>
  5.         <scroll-view scroll-y>
  6.             <view class="cont border-bottom">{{htmlSnip}}</view>
  7.         </scroll-view>
  8.         <view class="description">渲染效果</view>
  9.         <view class="rich-text">
  10.             <!-- 基础库 3.150.1 以前的版本，selectable 属性默认为 false，期望文本不可被选中时不用设置此属性 -->
  11.             <rich-text nodes="{{htmlSnip}}" image-menu-prevent="true"></rich-text>
  12.             <!-- 基础库 3.150.1 及以后版本，selectable 属性默认为 true，期望文本不可被选中时需设置此属性为 false -->
  13.             <!-- <rich-text selectable="false" nodes="{{htmlSnip}}"></rich-text> -->
  14.         </view>
  15.     </view>
  16. </view>

代码示例 2：通过节点渲染

  • SWAN
  • JS
  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">通过节点渲染</view>
  4.         <view class="description">代码示例</view>
  5.         <scroll-view scroll-y>
  6.             <view class="cont border-bottom">{{nodeSnip}}</view>
  7.         </scroll-view>
  8.         <view class="description">渲染效果</view>
  9.         <view class="rich-text">
  10.             <!-- 基础库 3.150.1 以前的版本，selectable 属性默认为 false，期望文本不可被选中时不用设置此属性 -->
  11.             <rich-text nodes="{{nodes}}"></rich-text>
  12.             <!-- 基础库 3.150.1 及以后版本，selectable 属性默认为 true，期望文本不可被选中时需设置此属性为 false -->
  13.             <!-- <rich-text selectable="false" nodes="{{nodes}}"></rich-text> -->
  14.         </view>
  15.     </view>
  16. </view>

Bug & Tip

  • Tip：查看将富文本字符串转成 JSON 格式的具体方法。
  • Tip：支持默认事件，包括：tap、touchstart、touchmove、touchcancel、touchend 和 longtap 。
  • Tip：rich-text 组件内屏蔽所有节点的事件。
  • Tip：内部 img 标签仅支持网络图片。
  • Tip：如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 swan 样式对 rich-text 中的 class 生效。