冰河洗剑技术随笔 2021-10-10 16:54:58 热度：6138

uniapp rich-text无法处理video解决办法和修改样式

rich-text 无法处理 video

uni-app 文档中关于 rich-text 介绍中明确说明 rich-text 支持什么，其中并不包含 video 。

解决办法

在uni-app插件市场搜索parse插件使用。
parse插件有很多，包含的功能也不尽相同。

我播放 video 时使用的是uParse 富文本解析。

uParse 富文本解析插件的使用

在项目中导入插件。这步不详述了。不会的需要补补关于uniapp的使用知识。
导入成功后，多出目录项目根目录/components/u-parse。

在页面中导入插件。

import uParse from '@/components/u-parse/u-parse.vue';

替换rich-text

<!-- <rich-text :nodes="content"></rich-text> -->
<u-parse :content="content" />

处理 video 标签样式

默认的vedio样式需要修改时，可以使用正则表达式替换。

新建 js 文件： richTextUtil.js

/**
 * 处理富文本里的图片宽度自适应
 * 1.去掉img、video标签里的style、width、height属性
 * 2.修改所有style里的width属性为max-width:100%
 * 3.img、video标签添加style属性：max-width:100%;height:auto
 * 4.去掉<br/>标签
 * @param html
 * @return string
 */
function formatRichText (html) {
	// 去掉img标签里的style、width、height属性
	let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
		match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
		match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
		match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
		return match;
	});
	
	// 去掉video标签里的style、width、height属性
	newContent= html.replace(/<video[^>]*>/gi,function(match,capture){
		match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
		match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
		match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
		return match;
	});
	// 修改所有style里的width属性为max-width:100%
	// 去掉所有style里的font-size属性
	newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
		match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
		match = match.replace(/font-size:[^;]+;/gi, '');
		return match;
	});
	// 去掉<br/>标签
	newContent = newContent.replace(/<br[^>]*\/>/gi, '');
	// img标签添加style属性：max-width:100%;height:auto
	newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');
	// video标签添加style属性：max-width:100%;height:auto
	newContent = newContent.replace(/\<video/gi, '<video style="max-width:100%;height:auto;display:block;margin:0px auto;"');
	return newContent;
}

export default {
	formatRichText,
};

引入js库

import richTextUtil from '@/common/richTextUtil.js';

调用方法

this.content = richTextUtil.formatRichText(res.content);

关于设置Video样式width:100%不生效问题：

在app.vue下设置即可

uni-video,.video,video{
		margin: 0px auto;
		width:100%;
	}

冰河洗剑

分享到：