本仓库是iOS端的weex富文本组件。本质上是一个UITextView,用于将HTML字符串解析成NSAttributedString。
但是,并不是所有HTML样式都能被解析出来,比如圆角、渐变、边框等。
本组件对这些特殊样式也一样做了支持,并且支持自定义超链接颜色、文字行数获取等扩展功能。
pod 'KSWXRichTextComponent'
1.原生中注册组件
[WXSDKEngine registerComponent:@"rich-text" withClass:[KSWXRichTextComponent class]];
2.前端中使用组件
<rich-text class="rich" text="<p style='color:blue;'>abc</p>"></rich-text>
.rich {
color: red;
}
color: ;
fontFamily: ;
fontSize: ;
textAlign: ;
lineHeight: ;
paddingLeft: ;
paddingRight: ;
paddingTop: ;
paddingBottom: ;
letterSpacing: ;
textOverflow: ; // only ellipsis
lines: ;
支持所有样式,但是并不是都会被解析出来,比如
圆角相关样式
style中带
border样式的会被解析成图片附件(NSTextAttachment)替换原来的富文本
/*自带以下样式,修改无效*/
display: inline-block;
border-style: solid;
white-space: nowrap;
overflow: hidden;
/*渐变色支持四个方向*/
background-image: linear-gradient(to {where}, {color}, {color}, ...);
/*只支持ellipsis*/
text-overflow: ellipsis;
/*只支持left、right、center*/
text-align: ;
margin: ;
margin-top: ;
margin-bottom: ;
margin-left: ;
margin-right: ;
padding: ;
padding-top: ;
padding-bottom: ;
padding-left: ;
padding-right: ;
font-size: ;
font-family: ;
color: ;
border-radius: ;
background-color: ;
height ;
width: ;
line-height: ;
border-width: ;
border-color: ;
1.获取行数
$refs.richtext.getTextLineInfo((res) => {
const arg = JSON.parse(res)
res.maxLine // 最大行数
res.realLine // 实际行数
})
[KSWXRichTextComponent observeLinkClick:^(WXSDKInstance *weexInstance, NSURL *URL) {
if ([URL.scheme isEqualToString:@"somescheme"]) {
// do some thing
}
}];
[KSWXRichTextComponent addDefaultStyles:@{KSWXRichTextLinkTextColorKey: [UIColor orangeColor],
KSWXRichTextLinkUnderlineColorKey: [UIColor orangeColor]
}];
MIT