rich-text使用记录

that.content = item.content.replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p').replace(/<p>/ig,
     '<p style="font-size: 15Px; line-height: 25Px;">')
    .replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
    .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
    .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
    .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
    .replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img$1 style="width: 80%;height:400upx border-radius: 8Px;"');

方法一                     这种用法导致我解析出错率频发   

 

 

const regex = new RegExp('<img', 'gi');
     richtext= richtext.replace(regex, `< img style="max-width: 100%;"`);

 

    方法二                          图片太大,脱离文档流

 

const regex = new RegExp('<img', 'gi');
			that.content = item.content.replace(regex, `<img style="width: 100%;height:400upx border-radius: 8Px;margin-left: -12%;"`);

方法三                  我得最新版本  ,解决了之前出现的问题

 

 

checkmp4.js

const CheckStatus = function(url, fun) {
	uni.request({
		url: url,
		type: "post",
		// dataType: "jsonp", //跨域采用jsonp方式
		// processData: false,
		success: function(data) {
			console.log("成功", data);
			if (data.statusCode == 200) {
				console.log("成功");
				fun(true);
			} else if (data.CheckStatus == 403) {
				fun(false);
			} else {
				console.log("失败");
				fun(false);
			}
		}
	});
}

export default CheckStatus;

 

正文

<template>
	<view>
		<view class="box">
			<view class="sh">
				{{title}}
			</view>
			<view class="sh-a">
				<text>5趣币</text>
			</view>
			<view class="sh-b">
				{{name}}
				<text>
					{{time}}
				</text>
			</view>
			<!-- 检查视频    但是现在免费的资讯接口中无妨跨域访问他端的视屏 -->
			<view v-if="urlVideo!=''" style="width: 90%;height: 20%;">
				<video :src="urlVideo" controls autoplay="true"></video>
			</view>

			<!-- content -->
			<view class="sh-sh-rich text-indent">

				<view v-html="content"></view>
				<!-- <rich-text :nodes="content"></rich-text> -->
			</view>


			<!--
			 浏览器视屏
			-可以播放视屏
			   只是没有办法显示计时器  
			  直接跳转的链接进入新闻页 
			 <view class="">
				<web-view :src="url"></web-view>
			</view> -->

			<!-- 计时器 28s  UI给的gif图  -->
			<view class="jishiqi" v-if="!Newtata">
				<image src="../../../static/center/hehehe.gif"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import CheckStatus from '../../../common/checkmp4.js'
	// import parser from "@/components/jyf-Parser/index"
	import {
		Requers
	} from '../../../components/CheckContext.js'

	export default {
		name: 'CheckStatus',
		data() {
			return {
				id: '',
				title: '',
				time: '',
				src: '',
				name: '',
				url: '', //webview中的资讯连接
				urlVideo: '', //播放视频的地址
				isvideo: '', //判断视频地址
				item: [], //接收的消息
				Newtata: false, //gif图
				setTimeoutDiy: setTimeout(() => {
					this.Newtata = true;
					this.NewTask()
				}, 28000), //28S
				content: '', //消息
			};
		},
		onShow() {
			// console.log('onshow', this.setTimeoutDiy)
			if (this.setTimeoutDiy === null) {
				this.Newtata = !this.Newtata
			}
		},
		// 监听按钮的点击事件
		// onNavigationBarButtonTap(e) {
		// 	var ws=plus.webview.currentWebview();
		// 		plus.webview.close(ws);

		// 	uni.navigateTo({
		// 		url:'../message'
		// 	})
		// },
		onBackPress() {
			console.log('backpress  setTimeoutDiy', this.setTimeoutDiy)
			if (this.setTimeoutDiy) {
				clearTimeout(this.setTimeoutDiy);
				this.setTimeoutDiy = null;
			}
		},
		onHide() {
			console.log('onhide  setTimeoutDiy', this.setTimeoutDiy)
			if (this.setTimeoutDiy) {
				clearTimeout(this.setTimeoutDiy)
				this.setTimeoutDiy = null
			}
		},
		onUnload: function() {
			console.log('onunload  setTimeoutDiy', this.setTimeoutDiy)
			if (this.setTimeoutDiy) {
				clearTimeout(this.setTimeoutDiy);
				this.setTimeoutDiy = null;
			}
		},

		onLoad() {
			var that = this
			that.token = uni.getStorageSync('token');
			let item = JSON.parse(uni.getStorageSync('messa'))
			console.log("onloadMessage", item)
			that.id = item.id
			that.title = item.title
			that.time = item.time
			that.src = item.src
			that.name = item.name
			// that.content = Requers(item.content);

			const regex = new RegExp('<img', 'gi');
			that.content = item.content.replace(regex, `<img style="width: 100%;height:400upx border-radius: 8Px;margin-left: -12%;"`);
			// 控制内容图片   防止脱离文档流
			// that.content = item.content
			// 	.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
			// 	.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
			// 	.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
			// 	.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
			// 	.replace(/<img([\s\w"-=\/\.:;]+)/ig,
			// 		'<img$1 style="width: 100%;height:400upx border-radius: 8Px;margin-left: -12%;"');



			// console.log("content******", that.content)




			// if (that.content.indexOf('video') !== -1) {
			// 	if (that.content.indexOf('.mp4') !== -1)
			// 		that.isvideo = that.content.substring(that.content.indexOf('src') + 5, that.content.indexOf('mp4') + 3)
			// 	//测试视频 this.isvideo = 'http://vfx.mtime.cn/Video/2019/03/21/mp4/190321153853126488.mp4'
			// 	console.log("检查视频地址:" + that.isvideo)

			// 	CheckStatus(that.isvideo, function(res) {
			// 		console.log(res)
			// 		if (res == true) {
			// 			that.urlVideo = that.urlVideo
			// 		} else {
			// 			that.urlVideo = ''
			// 		}
			// 	});
			// } else {
			// 	this.urlVideo = ''
			// }
		},
		methods: {
			// 定时领取任务添加的接口
			NewTask() {
				var that = this
				if (that.token) {
					console.log("消息id", that.id)
					uni.request({
						url: this.baseUrl + 'api/Task/submitNewsTask',
						data: {
							"token": that.token,
							"news_id": that.id
						},
						method: "POST",
						header: {
							'Content-type': 'application/x-www-form-urlencoded'
						},
						success: (ret) => {
							console.log("任务大厅", ret)
							if (ret.data.code == 0) {
								uni.hideToast()
								uni.showToast({
									title: '阅读成功!',
									icon: 'success'
								});
							} else if (ret.data.code == 1) {
								uni.hideToast()
								uni.showToast({
									title: ret.data.msg,
									icon: 'none'
								});
							} else {
								uni.hideToast()
								uni.showToast({
									title: ret.data.msg,
									icon: 'success'
								});
							}
						},
						error: (e) => {
							uni.hideToast()
							uni.showToast({
								title: e.response.data.msg,
								icon: 'none'
							});
						}
					})
				} else {
					uni.showToast({
						title: '请先去登录!',
						icon: 'none'
					})
					uni.navigateTo({
						url: '../../login/login'
					})
				}
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #fff;
		font-family: pingfang-sc-regular;
		font-size: 34upx;
		margin: 80upx auto;
	}

	.box {
		width: 90%;
		margin: 40px auto;
	}

	.sh {
		min-height: 60upx;
		flex-wrap: wrap;
	}

	.sh-a {
		margin-top: 20upx;
		margin-bottom: 20upx;
		width: 100upx;
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		border-radius: 20upx;
		background-color: #333231;
		color: #FDEDA9;
	}

	.sh-b {
		display: flex;
		color: #BEBEBE;
		justify-content: space-between;
	}

	.text-indent {
		text-indent: 2rem;
	}

	/*版本一*/
	.jishiqi {
		position: fixed;
		bottom: 14px;
		right: 30px;
		z-index: 99999;
	}

	.jishiqi image {
		width: 100upx;
		height: 100upx;
		background-color: #FFFFFF;
		border-radius: 50%;
	}
</style>