富文本。
效果展示
示例代码
WXML
<view class="page">
<view class="page__hd">
<text class="page__title">rich-text</text>
<text class="page__desc">富文本</text>
</view>
<view class="page__bd">
<rich-text nodes="{{nodes}}"></rich-text>
</view>
</view>
|
JS
Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: blue;padding-left:30px;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}]
}
})
|
WXSS
.div_class {
margin-top: 10px;
}
|
API
| 属性 |
类型 |
默认值 |
必填 |
说明 |
| nodes |
array/string |
[] |
否 |
节点列表/HTML String |
nodes
现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的 HTML 节点。
元素节点：type = node
| 属性 |
说明 |
类型 |
必填 |
备注 |
| name |
标签名 |
string |
是 |
支持部分受信任的 HTML 节点 |
| attrs |
属性 |
object |
否 |
支持部分受信任的属性，遵循 Pascal 命名法 |
| children |
子节点列表 |
array |
否 |
结构和 nodes 一致 |
文本节点：type = text
| 属性 |
说明 |
类型 |
必填 |
备注 |
| text |
文本 |
string |
是 |
支持entities |
受信任的HTML节点及属性
全局支持 class 和 style 属性，不支持 id 属性。
| 节点 |
属性 |
| a |
|
| abbr |
|
| address |
|
| article |
|
| aside |
|
| b |
|
| bdi |
|
| bdo |
dir |
| big |
|
| blockquote |
|
| br |
|
| caption |
|
| center |
|
| cite |
|
| code |
|
| col |
span，width |
| colgroup |
span，width |
| dd |
|
| del |
|
| div |
|
| dl |
|
| dt |
|
| em |
|
| fieldset |
|
| font |
|
| footer |
|
| h1 |
|
| h2 |
|
| h3 |
|
| h4 |
|
| h5 |
|
| h6 |
|
| header |
|
| hr |
|
| i |
|
| img |
alt，src，height，width |
| ins |
|
| label |
|
| legend |
|
| li |
|
| mark |
|
| nav |
|
| ol |
start，type |
| p |
|
| pre |
|
| q |
|
| rt |
|
| ruby |
|
| s |
|
| section |
|
| small |
|
| span |
|
| strong |
|
| sub |
|
| sup |
|
| table |
width |
| tbody |
|
| td |
colspan，height，rowspan，width |
| tfoot |
|
| th |
colspan，height，rowspan，width |
| thead |
|
| tr |
colspan，height，rowspan，width |
| tt |
|
| u |
|
| ul |
注意：
- nodes 不推荐使用 String 类型，性能会有所下降。
- rich-text 组件内屏蔽所有节点的事件。
- attrs 属性不支持 id ，支持 class 。
- name 属性大小写不敏感。
- 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
- img 标签仅支持网络图片，若不设置图片大小则按原图大小显示。
- 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。
多平台支持
| 节点 |
支持平台 |
| a |
支付宝 |
| abbr |
支付宝 |
| address |
|
| article |
|
| aside |
|
| b |
支付宝 |
| bdi |
|
| bdo |
|
| big |
|
| blockquote |
支付宝 |
| br |
支付宝 |
| caption |
|
| center |
|
| cite |
|
| code |
支付宝 |
| col |
支付宝 |
| colgroup |
支付宝 |
| dd |
支付宝 |
| del |
支付宝 |
| div |
支付宝 |
| dl |
支付宝 |
| dt |
支付宝 |
| em |
支付宝 |
| fieldset |
支付宝 |
| font |
|
| footer |
|
| h1 |
支付宝 |
| h2 |
支付宝 |
| h3 |
支付宝 |
| h4 |
支付宝 |
| h5 |
支付宝 |
| h6 |
支付宝 |
| header |
|
| hr |
支付宝 |
| i |
支付宝 |
| img |
|
| ins |
支付宝 |
| label |
支付宝 |
| legend |
支付宝 |
| li |
支付宝 |
| mark |
|
| nav |
|
| ol |
支付宝 |
| p |
支付宝 |
| pre |
|
| q |
|
| rt |
|
| ruby |
|
| s |
|
| section |
|
| small |
|
| span |
支付宝 |
| strong |
支付宝 |
| sub |
支付宝 |
| sup |
支付宝 |
| table |
支付宝 |
| tbody |
支付宝 |
| td |
支付宝 |
| tfoot |
支付宝 |
| th |
支付宝 |
| thead |
支付宝 |
| tr |
支付宝 |
| tt |
|
| u |
|
| ul |
支付宝 |
注释：
支付宝div-class的style的background无效、p和blockquote的行间距不一致、dd有首行缩进、a标签不支持超链接