微信小程序不使用插件,渲染富文本中的视频,图片自适应,plus版本

这篇具有很好参考价值的文章主要介绍了微信小程序不使用插件,渲染富文本中的视频,图片自适应,plus版本。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

小程序原生的rich-text不支持渲染视频,所以需要处理后显示,主要用了字符串切割以及匹配

富文本图片自适应的问题

当我们从后端拿到富文本数据时,我们利用replace方法去修改图片的样式,保证图片与手机宽度保持一致

//richtext为富文本
let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"')   //图片自适应

如果富文本出现莫名的空白区域,可能是富文本中包含有换行标签,我们就将<br>标签替换掉

//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.mp4" data-setup="{}">
        <source src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" type="video/mp4"/>
    </video>
</p>
<p style="white-space: normal;">
    随便的文字
</p>
<p style="white-space: normal;">
    <img src="https://xxx.xxx.top/uploads/20220720/0fa5869614f227c88c7c89737836814c.png" title="" alt=""/>
</p>
<p style="white-space: normal;">
    <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.mp4" data-setup="{}">
        <source src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" type="video/mp4"/>
    </video>
</p>
<p>
    <br/>
</p>

这是我随便打的,视频链接也更改了(项目保密),结构上每一个p标签是一个段落,视频可能在一个段落中存在多个,处理方案:

1、处理

dealRichText(richtext) {
    let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"').replace(/<br\/>/g, ''); // 替换图片宽高
    let textArr = content.split(/<p/); //按照段落分割字符串
    let contentArr = [];
    // 防止一段多个视频,进行切割
    textArr.forEach(val => {
        let arr = val.split(/<video/)
        contentArr.push(...arr)
    })
    let newArr = []; //处理后的数组
    contentArr.forEach((val, i) => {
        if (val != '' && val != ">") { //防止为空字符串
            let matchResult = val.match(/(?<= class=\"edui-upload-video).+(?=\<\/video\>)/); //匹配字符串中是否有视频
            if (matchResult) {
                let a = matchResult[0].match(/(?<=src=\").+(?=\" data)/); //匹配视频链接
                newArr.push({
                    type: 'video',
                    content: a[0]
                })
            } else {
                newArr.push({
                    type: 'text',
                    content: "<p" + val
                })
            }
        }
    })
    return newArr;
},

最后的结果(数组):

0: {type: "text", content: "<p>随便的文字</p>"}
1: {type: "text", content: "<p><img style="max-width:100%;height:auto" src="ht…f227c88c7c89737836814c.png" title="" alt=""/></p>"}
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: "<p style="white-space: normal;">随便的文字</p>"}
5: {type: "text", content: "<p style="white-space: normal;"><img style="max-wi…f227c88c7c89737836814c.png" title="" alt=""/></p>"}
6: {type: "text", content: "<p style="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: "<p></p>"}

数据上还是有点小瑕疵的,不过不影响使用了文章来源地址https://www.toymoban.com/news/detail-432604.html

2、渲染

<!-- config.remark是最后的数据,也就是上面的数组 -->
<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>

到了这里,关于微信小程序不使用插件,渲染富文本中的视频,图片自适应,plus版本的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包