v0.20+

简介

富文本组件可以内嵌 <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 标签的无效。。示例richtext - 图1
    • 若多个嵌套节点上均包含 itemclick 事件，则只有最外层节点上的 itemclick 会被触发

示例

示例richtext - 图2