后浪云百度小程序教程：rich-text 富文本
- rich-text 富文本
- 属性说明
- nodes
- 受信任的 HTML 节点以及属性说明
- 示例
- 代码示例 1：通过 HTML String 渲染
- 代码示例 2：通过节点渲染
- Bug & Tip
- 属性说明
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 | 否 | 阻止长按图片时弹起默认菜单（将该属性设置为 | 3.170.1 |
preview | Boolean | 否 | 富文本中的图片是否可点击预览。在不设置的情况下，若 rich-text 未监听点击事件，则默认开启。未显示设置 preview 时会进行点击默认预览判断，建议显示设置 preview | 3.170.9 |
nodes
现支持两种节点，通过 type 来区分，分别是“元素节点”和“文本节点”，默认是元素节点，在富文本区域里显示的 HTML 节点。
元素节点 - type: ‘node’
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| name | String | 是 | 标签名。支持部分受信任的 HTML 节点，大小写不敏感 | ||
| attrs | Object | 否 | 属性。支持部分受信任的属性，遵循 Pascal 命名法。不支持 id ，支持 class | ||
| children | Array | 否 | 子节点列表。结构和 nodes 一致 |
文本节点 - type: ‘text’
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| text | String | 是 | 文本。支持 entities ，例如：<p><Life> is <i>like</i> a box of<b> 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
<view class="wrap"><view class="card-area"><view class="top-description border-bottom">通过HTML String渲染</view><view class="description">代码示例</view><scroll-view scroll-y><view class="cont border-bottom">{{htmlSnip}}</view></scroll-view><view class="description">渲染效果</view><view class="rich-text"><!-- 基础库 3.150.1 以前的版本，selectable 属性默认为 false，期望文本不可被选中时不用设置此属性 --><rich-text nodes="{{htmlSnip}}" image-menu-prevent="true"></rich-text><!-- 基础库 3.150.1 及以后版本，selectable 属性默认为 true，期望文本不可被选中时需设置此属性为 false --><!-- <rich-text selectable="false" nodes="{{htmlSnip}}"></rich-text> --></view></view></view>
代码示例 2：通过节点渲染
- SWAN
- JS
<view class="wrap"><view class="card-area"><view class="top-description border-bottom">通过节点渲染</view><view class="description">代码示例</view><scroll-view scroll-y><view class="cont border-bottom">{{nodeSnip}}</view></scroll-view><view class="description">渲染效果</view><view class="rich-text"><!-- 基础库 3.150.1 以前的版本，selectable 属性默认为 false，期望文本不可被选中时不用设置此属性 --><rich-text nodes="{{nodes}}"></rich-text><!-- 基础库 3.150.1 及以后版本，selectable 属性默认为 true，期望文本不可被选中时需设置此属性为 false --><!-- <rich-text selectable="false" nodes="{{nodes}}"></rich-text> --></view></view></view>
Bug & Tip
- Tip：查看将富文本字符串转成 JSON 格式的具体方法。
- Tip：支持默认事件，包括：tap、touchstart、touchmove、touchcancel、touchend 和 longtap 。
- Tip：rich-text 组件内屏蔽所有节点的事件。
- Tip：内部 img 标签仅支持网络图片。
- Tip：如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 swan 样式对 rich-text 中的 class 生效。