鸿蒙 next 使用并封装富文本 hp-richtext
作者：flfljh
- 2024-11-07 湖南
本文字数：1372 字
阅读完需：约 5 分钟
鸿蒙 next 使用并封装富文本 hp-richtext
使用鸿蒙第三方富文本(https://ohpm.openharmony.cn/#/cn/detail/@ohasasugar%2Fhp-richtext) , 并再将其包一层实现自己的富文本组件，这样的好处是以后可以自己再里面添加一下逻辑，或者以后可以更换成其他的富文本组件。
import { HPRichText, RichTextOption } from '@ohasasugar/hp-richtext';import { LogUtil } from '../../../common/utils/LogUtil';
type ImgType = 'heightLimit' | 'widthLimit' | 'maxWidth'
@Componentexport struct QuesRichText { @Prop @Watch('onUpdate') fontSize: number = 16; @Prop @Watch('onUpdate') fontColor: string = "#FF465069"; @Prop @Watch('onUpdate') richContent: string = ''; @Consume @Watch('onUpdate') scaleTextStyle: number; @State richTextOption: RichTextOption = { content: ``, baseFontSize: 0, baseFontColor: '' }; // 富文本对象 @State realContent: string = ''; @State imgType: ImgType = 'widthLimit';
onUpdate() { this.richTextOption = { content: this.getRichContent(this.richContent), baseFontSize: this.fontSize * this.scaleTextStyle, baseFontColor: this.fontColor, }; }
aboutToAppear() { this.onUpdate() }
// aboutToAppear(): void { // // this.realContent = this.richTextOption.content; // if (this.imgType == 'widthLimit') { // this.richTextOption.content = // this.richTextOption.content.replace(/\<img/g, '<img style="width: 160vp;height: auto;"') // } else if (this.imgType == 'heightLimit') { // this.richTextOption.content = // this.richTextOption.content.replace(/\<img/g, '<img style="width: auto;height: 65vp;"') // } else if (this.imgType == 'maxWidth') { // // 看了HPRichText的源码-不支持max-width属性, 但是可以用 constraintSize 实现 // this.richTextOption.content = // this.richTextOption.content.replace(/\<img/g, '<img style="max-width: 100vp"') // } // }
getRichContent(value: string) { let tempValue = value; if (this.imgType == 'widthLimit') { tempValue = tempValue.replace(/\<img/g, '<img style="width: 160vp;height: auto;"') } else if (this.imgType == 'heightLimit') { tempValue = tempValue.replace(/\<img/g, '<img style="width: auto;height: 65vp;"') } else if (this.imgType == 'maxWidth') { // 看了HPRichText的源码-不支持max-width属性, 但是可以用 constraintSize 实现 tempValue = tempValue.replace(/\<img/g, '<img style="max-width: 100vp"') }
LogUtil.info("tempValue", tempValue)
return tempValue; }
build() { if (this.richTextOption.content) { HPRichText({ richTextOption: this.richTextOption, })
}
}}
复制代码
使用:
QuesRichText({ richContent: "<p>hell world</p>", })
复制代码
划线
评论
复制
发布于: 刚刚阅读数: 5
flfljh
关注
还未添加个人签名 2024-10-29 加入
还未添加个人简介
评论