# <richtext> v0.20+

# Summary

Richtext is used to achieve inline <span> or <a> combined with inline-block <image>. It also supports nested <span>, <image> and <a> with style inheritance and override. Thus, richtext can be considered as a more general <text> with more powerful usage.

Only <span>, <a> and <image> are valid children of <richtext>. <span> and <a> are considered as display:inline, while <image> is considered as display:inline-block, which are default values and cannot be changed.

Children of <richtext> can be classified as two types of node, internal and external.

  • Internal node can have children nodes.
  • External node is not allowed to have any children.
  • <span> and <a> are internal nodes, while <image> is external node.

Richtext can be seen as a tree, and the max height of the tree is 255. Any style on a node of which the height is greater than 255 has no effect.

Notes

  • <a> on iOS will have a color:blue style, and children of <a> can not override this style. This only happens on iOS. There is no default style and override restriction for <a> on Android.
  • <image> in richtext must have width and height styles.
  • The content area of <image> will remain blank until the corresponding image is downloaded and there is no way to display a placeholder image.
  • Richtext cannot be nested.

# Attributes

Supported attributes of children of a richtext.

# image

  • src. Image source.
  • pseudo-ref. A ref assigned by developers and passed to the callback function of itemclick.

# a

  • herf. The herf.
  • pseudo-ref. A ref assigned by developers and passed to the callback function of itemclick.

# span

<span> does not support any attribute. A text must be set as the content of <span>, e.g. <span>Hello World</span>.

# Styles

Only limited css styles listed below are supported by richtext.

  • <span>, <a> and <richtext> itself
    • styles can be inherited
      • color
      • font-family
      • font-size
      • font-style
      • font-weight
      • line-height
    • styles cannot be inherited
      • background-color
  • <span>
    • styles cannot be inherited
      • text-decoration: none | underline | line-through, the default value is none
  • <richtext>
    • styles cannot be inherited
      • lines: the max line of richtext. Must be a positive integer.
  • <image>
    • styles cannot be inherited
      • width
      • height

# Events

  • common events. Support common events.
  • itemclick. Only works on img and a:
    • img tag:
      • None of parents is an a tag when the img tag is clicked.
      • If the first condition is not satisfied, Weex will try to open the hyperlink of a tag instead.
      • pseudo-ref of img will be passed to the callback function of onitemclick.
    • a tag:
      • The href property is 'click://' (This condition is required on iOS and is optional on Android).
      • The a tag has a pseudo-ref property whose value will be sent with the itemclick event. **Please be noted that the default jump behavior on a tag will be disabled at this moment.`Demo
    • If itemclick is specified on nested nodes, only the event on the outer node will take effect.

# Vue Example

Demo

Last Updated: 12/6/2019
Excellent docUnusable doc