uniapp 富文本rich-text显示组件的坑

最新推荐文章于 2024-06-19 14:31:33 发布

yyhh~

最新推荐文章于 2024-06-19 14:31:33 发布

阅读量853

点赞数

分类专栏： JS语法

本文链接：https://blog.csdn.net/m0_60067558/article/details/127850941

版权

uni-app

JS语法专栏收录该内容

12 篇文章 0 订阅

订阅专栏

uniapp之富文本rich-text的使用 - 简书

<template>
	<view class="content">
		<rich-text :nodes="richText"></rich-text>
		</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import htmlParser from '@/config/html-parser'
	import {
		mapState,mapMutations
	} from 'vuex';
	export default {
		components: {
			uniLoadMore	
		},
		data() {
			return {
				richText:'',
				strings: '<p>点击订单进入订单列表, 在想要退款的订单下点击退款</p>'
			};
		},
		onLoad(options){
			var content = JSON.parse(unescape(options.content));
			content = content.replace(/<!DOCTYPE html>/g,"").replace(/<html>/g,"").replace(/<\/html>/g,"").replace(/<head>/g,"").replace(/<\/head>/g,"").replace(/<body>/g,"").replace(/<\/body>/g,"")
			// var htmlString = content.replace(/\\/g, "").replace(/<img/g, "<img style=\"display:none;\"");//解析后台富文本
			console.log('图片1',content)
			this.richText = htmlParser(content);//该组件仅支持网络图片
			console.log('图片2',this.richText)
			
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			...mapMutations(['login']),
			
		},
	}
</script>