使用taro开发小程序实现富文本

富文本即RichText，一般是有文字有图的一种组合。示例如下：

"<p>第一段</p><p align="center"><img src="result.png"></p><p>第二段</p><p>第三段</p>"

这是html串，有p和img标签。

使用taro开发小程序实现富文本的方法为：

1.引入RichText组件

import { View, Text, Image, RichText } from '@tarojs/components'

2.使用该组件

<View className="content">
    <RichText nodes={processRichText(data.article)}></RichText>
</View>

3.调用函数对img标签进行处理。

max-width:100%是对图片宽度加以限制，避免超出屏幕。

height:auto为高度自适应。

display:block可以去掉图片之间的空白间隔。

export let processRichText = (str)=>{
    if(str){
        return str.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block"')
    }else{
        return ''
    }
}