- 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 生效。
