<richtext>

简介

富文本组件可以内嵌 <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 会被触发

Vue 示例

示例