小程序原生的rich-text不支持渲染视频,所以需要处理后显示,主要用了字符串切割以及匹配
富文本图片自适应的问题
当我们从后端拿到富文本数据时,我们利用replace方法去修改图片的样式,保证图片与手机宽度保持一致
//richtext为富文本
let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"') //图片自适应
如果富文本出现莫名的空白区域,可能是富文本中包含有换行标签,我们就将
标签替换掉
//richtext为后端传过来的富文本
dealRichText(richtext) {
let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"').replace(/<br\/>/g, '');
return content;
}
渲染视频
网上也有不少方法,但是我的富文本是用百度富文本编辑器生成的,有些复杂,是这样的:
<p>
随便的文字
</p>
<p>
<img src="https://weiqing.kuxia.top/uploads/20220720/0fa5869614f227c88c7c89737836814c.png" title="" alt=""/>
</p>
<p>
<video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" data-setup="{}">
<source src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" type="video/mp4"/>
</video>
<video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.m