rich-text¶
1.4.0 新版功能: 低版本需做 兼容处理 。
属性 |
类型 |
默认值 |
必填 |
说明 |
最低版本 |
---|---|---|---|---|---|
nodes |
array/string |
[] |
否 |
节点列表/HTML String |
1.4.0 |
space |
string |
否 |
显示连续空格 |
2.4.1 |
space 的合法值
值 |
说明 |
---|---|
ensp |
中文字符空格一半大小 |
emsp |
中文字符空格大小 |
nbsp |
根据字体设置的空格大小 |
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 |
|
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 |
小技巧
nodes 不推荐使用 String 类型,性能会有所下降。
小技巧
rich-text 组件内屏蔽所有节点的事件。
小技巧
attrs 属性不支持 id ,支持 class 。
小技巧
name 属性大小写不敏感。
小技巧
如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除。
小技巧
img 标签仅支持网络图片。
小技巧
如果在自定义组件中使用 rich-text 组件,那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。
示例代码
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}]
},
tap() {
console.log('tap')
}
})