不使用插件，小程序也能完整的渲染富文本（视频展现，图片自适应）

用过小程序rict-text的帅哥靓女们（说的就是正在看文章的你）都知道，rich-text是无法解析富文本中的video标签的，本文教你如何优雅的在不使用插件的情况下完整的渲染富文本

首先是富文本图片自适应的问题

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

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

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

//richtext为后端传过来的富文本
dealRichText(richtext) {let content = '';content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"').replace(/<br\/>/g, '');return content},

然后我们来处理富文本中的视频问题

既然小程序的rict-text不能渲染视频，那我们不妨就将富文本切割成部分富文本和视频相间隔的数组（有点拗口了昂），话不多上，给各位客官上才艺

//richtext是富文本
dealVideo(richtext){let contentArr = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"')contentArr = richtext.split(/<video [^>]*src=['"]([^'"]+)[^>]*><\/video>/)return contentArr//contentArr中偶数为视频链接地址，奇数为富文本，利用循环渲染出来}

不想看代码的客观可以直接复制代码使用！

代码中的contentArr就是富文本和视频相间隔的数组，偶数为视频链接地址，奇数为富文本，利用循环渲染出来(这里用的是uniapp来写得，用原生也是一样的思路，写法不一样)

<view  v-for="(item,index) in contentArr"><rich-text :nodes="item" v-if="index%2==0||index==0"></rich-text><video :src="item" v-if="index%2==1" style="width: 100%;" controls></video>
</view>

那为啥不使用插件呢，原因很简单，市面上一大堆的插件，实在是懒得看了，寻思着咱又不是写不出来，就是没人家完美罢了！

至于还不熟replace的小伙伴建议阅读一下文档
replace文档

不使用插件，小程序也能完整的渲染富文本（视频展现，图片自适应）相关推荐

微信小程序商品详情html,微信小程序关于商品详情类的富文本解析器
微信小程序关于商品详情类的富文本解析器 2020年08月10日 | 萬仟网IT编程 | 我要评论微信小程序关于商品详情类的富文本解析器富文本的解析,在vue中有v-html解析富文本的方法,但是在微 ...
微信小程序加载并且编译显示富文本编辑器内容
微信小程序如何加载并且显示百度编辑器中的内容一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...
小程序展示后台编辑好的富文本[文字图片视频等]
小程序在开发的过程中都会遇到小程序官方给了富文本编辑器editor组件,但是只能在小程序端编辑,然后保存到后台的数据库中,但是一般都是网站后台编辑好,然后在小程序端展示后台编辑好的富文本信息.这样就可 ...
uni-app 富文本小程序富文本（微信小程序、支付宝小程序、百度小程序）直接套用pc端富文本问题解析
微信跟百度直接使用 u-parse组件,效果还是不错的,注意一点是a标签的复制提示语,自己需要uni.hideLoading()一下,再重置. 支付宝相对复杂一点,采用原生rich-text 标签, ...
小程序 js把本地或取得临时的视频或者图片路径封装成file文件流
import FormData from '../../../utils/formdata' uploadFiles(newUrl){ let formData = new FormData();// ...
【西瓜】全套打包微社区西瓜同城分类信息系列打包整套插件(30个插件+小程序)
[西瓜]微社区西瓜插件全套打包微社区西瓜同城分类信息系列打包整套插件(30个插件+小程序特惠)西瓜同城系列全套插件西瓜本地同城分类信息整站西瓜同城小程序西瓜同城分类信息系统 ====== ...
微信小程序开发的完整流程介绍，新手必读
自从跳一跳小程序游戏出现后,一夜之间,小程序就变得家喻户晓了,功能开发也越来越丰富,在微信搜一搜就会发现许多大品牌早已有自己的小程序了,越来越多的企业和商家都看中了这个风口,想快速开发出一款属于自己的 ...
手机腾讯视频android版插件,小程序1.6.5版更新，终于支持腾讯视频插件了
微慕小程序1.6.5版更新说明如下: 新增的功能 1.调整海报功能(adapter.js ,detail.js) 考虑到以前的海报生成有些变形,也容易导致失败,此次更新对海报的程序做了较大的调整,并做 ...
微信小程序云开发完整案例
微信小程序云开发完整案例本项目获高校微信小程序开发大赛华中赛区三等奖 [注]: 本人对该程序功能.UI等方面比较满意,分析总结了比赛成绩不算太好的原因,下一篇博客具体分享,给想参加该比赛的同学一些参 ...

不使用插件，小程序也能完整的渲染富文本（视频展现，图片自适应）

首先是富文本图片自适应的问题

然后我们来处理富文本中的视频问题

不使用插件，小程序也能完整的渲染富文本（视频展现，图片自适应）相关推荐

最新文章

热门文章