小程序原生的rich-text不支持渲染视频，所以需要处理后显示，主要用了字符串切割以及匹配
富文本图片自适应的问题
当我们从后端拿到富文本数据时，我们利用replace方法去修改图片的样式，保证图片与手机宽度保持一致
//richtext为富文本let content = richtext.replace(/<img class="aligncenter" src="https://img.maxssl.com/uploads/?url=ht…f227c88c7c89737836814c.png" title="" alt=""/>"}2: {type: "video", content: "https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4"}3: {type: "video", content: "https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4"}4: {type: "text", content: "white-space: normal;">随便的文字
"}5: {type: "text", content: "white-space: normal;">-wi…f227c88c7c89737836814c.png" title="" alt=""/>
"}6: {type: "text", content: "white-space: normal;">"}7: {type: "video", content: "https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4"}8: {type: "video", content: "https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4"}9: {type: "text", content: ""}
数据上还是有点小瑕疵的，不过不影响使用了
2、渲染
<view wx:for="{{config.remark}}" wx:key="index"><rich-text nodes="{{item.content}}" wx:if="{{item.type == 'text'}}"></rich-text><video src="{{item.content}}" wx:if="{{item.type == 'video'}}" style="width: 100%;" controls></video></view>