<richtext>
优质
小牛编辑
128浏览
2023-12-01
简介
富文本组件可以内嵌 <span>
<a>
<image>
。同时它也支持 <span>
<a>
<image>
的嵌套。
只有 <span>
, <a>
and <image>
可以包含在 <richtext>
标签里。<span>
and <a>
会被显示为 display:inline
,而 <image>
会被显示为 display:inline-block
。
<richtext>
的子节点分两种类型。
<span>
and<a>
可以再包含孩子节点。<image>
不能再包含孩子节点。
富文本组件内部树形结构不能超过255层,超过的层会被忽略。
注意事项
<a>
标签在 iOS 上恒定为color:blue
蓝色样式,它孩子节点也会被应用为该样式,见下面样例。Android 上无此限制。<image>
标签必须指定width
和height
.- 在图片下载完成前,
<image>
会保持空白状态,目前不支持显示占位图。 - 富文本组件自身不能嵌套。
属性
富文本组件的子节点支持的属性如下。
image
- src. 图片链接。
- pseudo-ref. 开发者指定的索引,会被传给回调方法 itemclick。
a
- herf. Herf。
- pseudo-ref. 开发者指定的索引,会被传给回调方法 itemclick。
span
<span>
不支持任何属性,文本需要包在 <span>
里面,例如 <span>Hello World</span>
。
样式
富文本和它下面的 <span>
, <a>
, <image>
只支持有限的样式。
<span>
,<a>
和<richtext>
- 可以被继承
- color
- font-family
- font-size
- font-style
- font-weight
- line-height
- 不可被继承
- background-color
- 可以被继承
<span>
- 可以被继承
- text-decoration: none | underline | line-through, 默认值是 none
- 可以被继承
<richtext>
- 不可被继承
- lines: 最大行数,必须为正数。
- 不可被继承
<image>
- 不可被继承
- width
- height
- 不可被继承
事件
- 通用事件 支持所有通用事件。
- itemclick. 只有
img
和a
标签可能触发,触发时机是:img
标签:img
被点击时没有任何父节点是a
- 如果第一个条件不满足,Weex 会尝试打开
a
标签指定的链接。 img
的 pseudo-ref 会作为参数传回来。
a
标签:a
标签的href被指定为"click://"(这个条件iOS端强要求,Android端并不要求)a
标签设置了pseudo-ref。此时itemclick事件会被触发,并且携带pseudo-ref的值。此时a
标签的无效。。示例
- 若多个嵌套节点上均包含
itemclick
事件,则只有最外层节点上的itemclick
会被触发