<richtext>

简介

<richtext>标签可以内嵌<span>、<a>、<image>标签。<span>和<a>会被显示为display:inline，而<image>会被显示为display:inline-block。

属性

• <span>不支持任何属性

• <a>

  • href: 跳转地址，目前只支持跳转JSN页面，href为JS Bundle的地址
  • pseudo-ref: 开发者指定的索引，会作为参数传递给itemclick事件回调
• <image>
  • src: 图片源地址，支持绝对地址、相对地址、data URL
  • pseudo-ref: 开发者指定的索引，会作为参数传递给itemclick事件回调

样式

<richtext>及其内嵌的<span>、<a>、<image>只支持有限的样式

• <richtext>、<span>、<a>通用样式

  • 可继承
    • color
    • font-family
    • font-size
    • font-weight: normal|bold，默认值为normal
    • font-style: normal|italic，默认值为normal
  • 不可继承
    • background-color

• <richtext>

  • 不可继承
    • text-align: left|right|center，默认值为left

• <span>

  • 不可继承
    • text-decoration: none|underline|line-through，默认值为none

• <image>

  • 不可继承
    • width
    • height

事件

• 通用事件: 支持所有通用事件
• itemclick: 只有image和a标签可能触发，触发时机是:
  • image标签:
    • image被点击时没有任何父节点是 a,若父节点是a,则JSN会尝试打开 a 标签指定的链接。
    • image 的 pseudo-ref 会作为参数传回来。
  • a标签:
    • a标签的href被指定为”click://“（这个条件iOS端强要求，Android端并不要求）
    • a标签设置了pseudo-ref。此时itemclick事件会被触发，并且携带pseudo-ref的值。此时 a 标签的href无效。

注意事项

• <span>和<a>可以再嵌套子节点，<image>不能再嵌套子节点
• <richtext>中不能再嵌套<richtext>
• <richtext>内部树形结构不能超过255层，超过的层会被忽略
• <image>标签必须指定width和height
• <image>标签如果是<a>标签的子节点，点击触发跳转，而不会触发itemclick事件
• <a>标签在iOS上固定为color:blue样式，它的子节点也会继承该样式，Android上则无此限制
• <image>标签在iOS上有长按拖动交互，在Android上不支持该交互
• <a>标签若同时设置pseudo-ref字段和href字段，在iOS&Android上点击则只会触发页面跳转事件，不触发itemclick事件
• 由于iOS系统富文本组件的限制，<image>不支持gif格式图片(图片不会有动画效果)

示例

<template>
  <div>
    <div>文字测试</div>
    <richtext style="color:purple;">
      <span style="color:red;">文</span>
      <span style="color:orange;">字</span>
      <span style="color:yellow;">颜</span>
      <span style="color:lime;">色</span>
      <span style="color:blue;">测</span>
      <span style="color:purple;">试</span>
      <span>继承color:purple</span>
    </richtext>
    <richtext style="font-size:45;">
      <span style="font-size:20;">继</span>
      <span style="font-size:25;">继</span>
      <span style="font-size:30;">继</span>
      <span style="font-size:35;">继</span>
      <span style="font-size:40;">继</span>
      <span style="font-size:45;">继</span>
      <span>继承font-size:45</span>
    </richtext>
    <richtext style="font-weight:bold;">
      <span style="font-weight:normal;">继</span>
      <span style="font-weight:bold;">继</span>
      <span>继承font-weight:bold</span>
    </richtext>
    <richtext style="font-style:italic;">
      <span style="font-style:normal;">继</span>
      <span style="font-style:italic;">继</span>
      <span>继承font-style:italic</span>
    </richtext>
    <richtext>
      <span style="text-decoration:none;">none</span>
      <span style="text-decoration:underline;">underline</span>
      <span style="text-decoration:line-through;">line-through</span>
    </richtext>

    <richtext style="text-align:left;">
      <span>左对齐</span>
    </richtext>
    <richtext style="text-align:right;">
      <span>右对齐</span>
    </richtext>
    <richtext style="text-align:center;">
      <span>居中</span>
    </richtext>

    <div>跳转测试</div>
    <richtext>
      <a href="https://jzzuag2o3.lightyy.com/quote.js">
        <span>jsnative</span>
      </a>
    </richtext>

	<div>点击事件测试</div>
	<richtext @itemclick="listener" style="font-size: 30px;">
	<span>已阅读并同意</span>
	<a style="color: yellow;" pseudo-ref="11">《xx基金风险匹配说明书》</a>
	<span>和</span>
	<a style="color: red;" pseudo-ref="12">《风险揭示函》</a>
		
	</richtext>

    <div>图片测试/事件测试</div>
    <richtext @itemclick="listener">
      <image
        class="rect"
        src="http://www.fresher.ru/manager_content/images2/kadry-veka/big/2-1.jpg"
        pseudo-ref="绝对地址"
      />
      <image class="rect" src="snapshot.jpeg" pseudo-ref="相对地址" />
      <image
        class="rect"
        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAABg1BMVEUAAAAA/wAAqgAAzAAAqgAAtgAAxgAAswAAuQAAvwAAxAAAtgARuwAQvwAPtAAMtgwMuQwLvAsLvwsKugoJvQkJvwkJuQkJuwkIvQgIuQgHvQcHuAcHugcHvAcHvgcGuwYLuwYLuAULugUKuwUKvQUJvQUJuQkJuwkJvAkJvQkJuwkIvAgKvQcKuwcKvAcKuwYJugYJuwYJuwYIuggIvAgIuggIuwgIuwgIvAgKuggKvAcKugcJvAcJuwcJuwcJugcJugYIuwYIugYIuwYKuwgKvAgJuwgIuwcIvAcKugYJuggJuwgJvAcJuwcJuwcIuwcIugcIuwcKuwcKugcJvAcJuwcJuwcJvAcJuwcJuwcJugYJuwYJuggJuwgJuwgJvAgJuwcJuwcJuwcJuwcIugcKuwcJuwcJuwcJuwcJuwcJuwcJvAcJugcJuwcJuwcJuwcJuwcJuwcJuwcJuwYJuwgKuwcJuwcJuwcJuwcJuwcJuwcJuwcJuwcJuwcJuwcJuwf///96p1fqAAAAf3RSTlMAAQMFBgcJCgsMDQ4PEBEVFhcYGhscHR4fISMkJSYnKS0vMDEyNjc4OTo8QUlLTE9RU1ZcX2BhYmNkamtucHFzd3x+f4CFh5mboKeosrO0tba4ubq9v8DBw8TFyMnKy8zNztHS1NXa29zd3t/j5OXm5+rr7O3x8vP4+fr7/P3+Cp0kdQAAAAFiS0dEgGW9nmgAAAGJSURBVBgZ7cH5PxRxHAfg97C5rxytciU5cu5SUSmEkNw5k6PNFSFrbayd97/ezHxnHNnXa49PvzXPA5fL9b/R8C/UbvK7B3K+MMkiSGkDOskNSGWM07BfDqGHARp2yyDUEqRh7wGE3kRo+OGFTPoITfvlkCmYpelnBWRqdmg6rIRMe4imoyrI9F/SdFwNEc8oLSePIXJ/mZZgLUSeHtBy+gQivjAtp3WQ0IZ0WkKNkMgcp3LWBAnvJpWzZ5CoP6QSbkY8vQfbrzXE5gtT+d2KeFpp+OxFDNqATuW8HXF9oCnUjTsyPtJ20YH4uqh8KsZtpWu0RfxIQNoclWAnbqo/oi3SiYR4JmibLsGVnnPaLnxI0L0p2n75oaSP0BHxI2HZS3SMPYKhYYGO6AskIWeFDv3b5NQxr+g9SErmPGOKPkeSshYYQ/Qlkpa1yDui3UhB7hf+RX+FlOSt8ha9FynK+8qb3iJl+Wu89g4CBet09EGkMEDlPYRKtmgahljuYGBvpg0ul8vlEvsDo9nn3gvcd50AAAAASUVORK5CYII="
        pseudo-ref="data URL"
      />
    </richtext>
    
    <div>a标签嵌套image-嵌套测试</div>
    <richtext @itemclick="listener" style="color:red;text-overflow:ellipsis">
            <span>link</span>
            <a href="https://jzzuag2o3.lightyy.com/search.js">
                <image style="width:150; height:150" src="https://img.alicdn.com/tps/i2/TB1hRb1IXXXXXX3XVXXXQaP.pXX-87-87.jpeg" pseudo-ref="2333"></image>
                <span>345466</span>
            </a>
            
            <image style="width:300; height:300" src="http://www.fresher.ru/manager_content/images2/kadry-veka/big/2-1.jpg" pseudo-ref="23"></image>
            <span>继承Transition继承Transition继承Transition继承Transition继承Transition继承Transition继承Transition继承Transition继承Transition</span>
            
        </richtext>
  </div>
</template>

<script>
import Light from "light";
export default {
  methods: {
    listener: function(e) {
      var modal = Light.requireModule("modal");
      modal.toast({
        message: "pseudoRef == " + e.pseudoRef,
        duration: 3
      });
    }
  }
};
</script>

<style>
.rect {
  width: 200;
  height: 200;
}
</style>