简介
<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
- text-align:
- 不可继承
<span>
- 不可继承
- text-decoration:
none
|underline
|line-through
,默认值为none
- text-decoration:
- 不可继承
<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>