小程序 rich-text富文本的一些问题

图片

1、返回的数据中有的图片很大，在手机上显示会出现需要左右滑动的情况，那么我们就要做如下处理了，给图片加个样式

 data= data.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ');

换行

2、返回的数据中明明是有换行的，但是就是不生效，看不到效果，那么就又需要处理一下咯

data= data.replace(/\<p>&nbsp;<\/p>/gi, '<br/>');

空格

3、除了换行，也有空格不生效的，如下处理就好啦

data=data.replace(/\&nbsp;/gi, '\xa0')

视频

4、video节点不显示问题
思路：以video截取拆分成数组，然后页面渲染时这个数组显示内容

js处理，得到拆分好的数据数组

// 富文本视频解析getVideo(data) {let videoList = [];let videoReg = /<video.*?(?:>|\/>)/gi; //匹配到字符串中的 video 标签let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; //匹配到字符串中的 video 标签 的路径let arr = data.content.match(videoReg) || []; // arr 为包含所有video标签的数组let articleList = data.content.split('</video>') // 把字符串  从视频标签分成数组arr.forEach((item, index) => {var src = item.match(srcReg);videoList.push(src[1]) //所要显示的字符串中 所有的video 标签 的路径})let needArticleList = [];articleList.forEach((item, index) => {if (item != "" && item != undefined) { //  常见的标签渲染needArticleList.push({type: 'rich-text',value: item + "</video>"});}let articleListLength = articleList.length; // 插入到原有video 标签位置if (index < articleListLength && videoList[index] != undefined) {needArticleList.push({type: 'video',value: videoList[index]})}})return needArticleList},

wxml 页面渲染

 <view class="infoContentStyle" wx:for="{{data.needArticleList}}" wx:key="index"><rich-text wx:if="{{item.type=='rich-text'}}" class='content' nodes="{{item.value}}"></rich-text><video wx:if="{{item.type=='video' && item.value}}" src="{{item.value}}"style="width:100%;height: 150px" frameborder="0"></video></view>

小程序 rich-text富文本的一些问题相关推荐

微信小程序 - 解决 rich-text 富文本解析图片无法自适应宽高问题（图片超出屏幕宽度且不受控）
前言注意:您无法通过直接指定 <img> 标签样式来试图设置为自适应图片. 使用官方 <rich-text> 富文本组件解析时, 当内容包含图片(大图)时显示的结果就会超出屏 ...
creator html富文本_小程序之HTML富文本解析
开发小程序的某些详情时候,经常会遇到后台返回的HTML富文本编辑的内容,小程序无法正常解析,这时候我们常用的做法就是采用一些插件来完成页面的渲染. 微信小程序插件wx-parse 插件地址:https ...
微信小程序如何显示富文本，类似v-html，rich-text
一.微信小程序需求,有一段富文本字符串需要解析并展示在页面上: 结构如下 :content 二.解决办法一.用过vue 的都知道vue 有个 v-html 属性,可以准换html格式并且展示: 但是 ...
微信小程序开发(十三)富文本插件wxParse的wxParseImgTap的bug修复
在上一篇微信小程序开发(十二)富文本插件wxParse的使用中,我已经使用了wxParse插件.下午有时间就仔细的把玩了一下,发现了一个bug. 问题描述仔细看报错,我们会发现是wxParse.js ...
微信小程序：rich-text 富文本中图片自适应
/*** 处理富文本里的图片宽度自适应* 1.去掉img标签里的style.width.height属性* 2.img标签添加style属性:max-width:100%;height:auto* 3 ...
mpvue小程序云开发 + 富文本editor
1.mpvue在使用新组件editor的时候发现 bindready="onEditorReady" 没法用@ready 所以我用了监听页面初次渲染完成onReady,来进行富文本 ...
微信小程序支付html标签,微信小程序/支付宝小程序 WxParse解析富文本（html）代码...
image.png 二.复制到小程序utils目录下 image.png 三.在要使用的目标文件中具体路径根据目标文件定,当前目标文件在pages - news - detail 3.1.在目标文件 ...
微信小程序显示HTML富文本
效果图上面是转化后的,下面是后台获取的HTML标签下载wxParse文件 git地址:https://github.com/icindy/wxParse 找到 wxParse 文件夹复制到你的项 ...
微信小程序解析html富文本插件wxparse的使用
第一步:下载把wxparse文件放到根目录下第二步:引入<import src="../../wxParse/wxParse.wxml"/> 在xx.wxml页面 ...
小程序PHP字体,微信小程序在text文本实现多种字体样式
这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下微信小程序比较特别,它的wxml只允许用自 ...

小程序 rich-text富文本的一些问题

图片

换行

空格

视频

小程序 rich-text富文本的一些问题相关推荐

最新文章

热门文章

小程序 rich-text富文本 的一些问题

图片

换行

空格

视频

小程序 rich-text富文本 的一些问题相关推荐

最新文章

热门文章

小程序 rich-text富文本的一些问题

小程序 rich-text富文本的一些问题相关推荐