rich-text
基础库 1.0.0 开始支持本组件
富文本。
代码示例
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|---|
| nodes | array/string | [ ] | 否 | 节点列表 / HTML String | 1.0.0 |
nodes
当 nodes 是 array 类型时，node 现支持两种类型节点，通过 type 来区分，分别是 元素节点 和 文本节点 ，默认是元素节点。
| 值 | 说明 |
|---|---|
| node | 元素节点 |
| text | 文本节点 |
type=node
在富文本区域里显示的 HTML 节点，元素节点支持的属性如下：
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|---|
| name | string | -- | 是 | 标签名，支持部分受信任的 HTML 节点 | 1.0.0 |
| type | string | 'node' | 否 | 节点类型 | 1.0.0 |
| attrs | object | -- | 否 | 属性，支持部分受信任的属性，遵循 Pascal 命名法 | 1.0.0 |
| children | array | [] | 否 | 子节点列表，结构和 nodes 一致 | 1.0.0 |
type=text
文本节点支持的如下：
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|---|
| text | string | -- | 是 | 文本内容，支持 entities | 1.0.0 |
| type | string | 'node' | 是 | 节点类型，此处需要修改成 'text' | 1.0.0 |
受信任的 HTML 节点属性说明
全局支持 class 和 style 属性，不支持 id 属性。
| 节点 | 额外支持的属性 | 最低支持版本 |
|---|---|---|
| a | - | 1.0.0 |
| abbr | - | 1.0.0 |
| address | -- | 1.78.0 |
| article | -- | 1.78.0 |
| aside | -- | 1.78.0 |
| b | - | 1.0.0 |
| bdi | -- | 1.78.0 |
| bdo | dir | 1.78.0 |
| big | -- | 1.78.0 |
| blockquote | - | 1.0.0 |
| br | - | 1.0.0 |
| caption | -- | 1.78.0 |
| center | -- | 1.78.0 |
| cite | -- | 1.78.0 |
| code | - | 1.0.0 |
| col | span, width | 1.0.0 |
| colgroup | span, width | 1.0.0 |
| dd | - | 1.0.0 |
| del | - | 1.0.0 |
| div | - | 1.0.0 |
| dl | - | 1.0.0 |
| dt | - | 1.0.0 |
| em | - | 1.0.0 |
| fieldset | - | 1.0.0 |
| font | -- | 1.78.0 |
| footer | -- | 1.78.0 |
| h1 | - | 1.0.0 |
| h2 | - | 1.0.0 |
| h3 | - | 1.0.0 |
| h4 | - | 1.0.0 |
| h5 | - | 1.0.0 |
| h6 | - | 1.0.0 |
| header | -- | 1.78.0 |
| hr | - | 1.0.0 |
| i | - | 1.0.0 |
| img | alt, src, height, width | 1.0.0 |
| ins | - | 1.0.0 |
| label | - | 1.0.0 |
| legend | - | 1.0.0 |
| li | - | 1.0.0 |
| mark | -- | 1.78.0 |
| nav | -- | 1.78.0 |
| ol | start, type | 1.0.0 |
| p | - | 1.0.0 |
| pre | - | 1.0.0 |
| q | - | 1.0.0 |
| rt | -- | 1.78.0 |
| ruby | -- | 1.78.0 |
| s | -- | 1.78.0 |
| section | -- | 1.78.0 |
| small | -- | 1.78.0 |
| span | - | 1.0.0 |
| strong | - | 1.0.0 |
| sub | - | 1.0.0 |
| sup | - | 1.0.0 |
| table | width | 1.0.0 |
| tbody | - | 1.0.0 |
| td | colspan, height, rowspan, width | 1.0.0 |
| tfoot | - | 1.0.0 |
| th | colspan, height, rowspan, width | 1.0.0 |
| thead | - | 1.0.0 |
| tr | colspan, height, rowspan, width | 1.78.0 |
| tt | -- | 1.78.0 |
| u | -- | 1.78.0 |
| ul | - | 1.0.0 |
| video | src, poster | 1.0.0 |
扫码体验
请使用字节宿主APP扫码
Bug & Tip
- Tip：nodes 推荐使用 array 类型，由于组件会将 string 类型转换为 array 类型，因而性能会有所下降。
- Tip：rich-text 中的 html 内容不会触发绑定事件（如：bindtap 等），bindtap 等绑定事件只会在最外层的 rich-text 标签上触发
- Tip：attrs 属性不支持 id，支持 class。
- Tip：name 属性大小写不敏感。
- Tip：如果使用了不受信任的 HTML 节点，该节点及其所有子节点将会被移除。
- Tip：img 标签仅支持网络图片，并且只支持 HTTPS 协议。
- Tip：video 标签仅支持网络视频，并且只支持 HTTPS 协议。
- Tip：如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 ttss 样式对 rich-text 中的 class 生效。
点击纠错
评价此篇文档