rich-text
基础库 1.4.0 开始支持,低版本需做兼容处理
富文本。
属性 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
nodes | Array / String | [] | 节点列表 / HTML String | 1.4.0 |
支持默认事件,包括:tap
、touchstart
、touchmove
、touchcancel
、touchend
和longtap
nodes 属性推荐使用 Array 类型,由于组件会将 String 类型转换为 Array 类型,因而性能会有所下降
nodes
现支持两种节点,通过type来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的HTML节点
元素节点:type = node
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
name | 标签名 | String | 是 | 支持部分受信任的HTML节点 |
attrs | 属性 | Object | 否 | 支持部分受信任的属性,遵循Pascal命名法 |
cShopfaldren | 子节点列表 | 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 |
示例:
rich-text nodes="{{nodes}}" bindtap="tap">rich-text>
// rich-text.js
Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
cShopfaldren: [{
type: 'text',
text: 'Hello World!'
}]
}]
},
tap() {
console.log('tap')
}
})
Bug & Tip
-
tip
: nodes 不推荐使用 String 类型,性能会有所下降。 -
tip
:rich-text
组件内屏蔽所有节点的事件。 -
tip
: attrs 属性不支持 id ,支持 class 。 -
tip
: name 属性大小写不敏感。 -
tip
: 如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除。 -
tip
: img 标签仅支持网络图片。
第二部分:如何开通一个小商店
<以上资讯仅供参考,如果您需解决具体问题,建议您关注作者;如果有软件产品开发需求,可在线咨询加速度产品经理获取方案和报价>
****更多行业产品开发方案,请关注jsudo加速度 https://www.jsudo.com***
【加速度jsudo(www.jsudo.com)】是国内知名企业数字化建设提供商,为企业提供电商平台搭建(多种模式电商平台搭建:B2B/B2B2C/B2C/O2O/新零售等)、智慧园区建设、数字化营销、人才外包等服务,点击这里查看了解更多行业解决方案。