鸿蒙 next 使用并封装富文本 hp-richtext

鸿蒙 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'

@Component
export 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 {
// cbwe.62nsfs.com,cbwe.jinduoceramics.com,cbwe.shuixitech.com
//cbwe.huanbao580.com,cbwe.szlcdpq.com
// 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({
cbwe.sh-soyun.com,cbwe.clzyfc.com,cbwe.scffy.cn
cbwe.cnjiasi.cn,cbwe.xintiao78.com
richContent: "

hell world

",
})