【uniapp】富文本

哇哦Q2023-10-29 19:45

1、富文本显示，只显示文字，其余html不显示

功能：红框处其实是一个富文本，有图片之类的。但是现在不想根据html显示，只显示文字。

直接上代码

html 复制代码

//内容显示
<view>{{item.fhArticleVo.content}}</view>

javascript 复制代码

// 下拉刷新
			downCallback(page) {
				this.information()
				this.servicesPurchasedByUsers()
				this.fActivityList()
				this.api.invitation({
					pageNum: 1, //这个是upOption中的page传递的，upCallback的参数
					pageSize: page.size
				}).then(res => {
					res.rows.forEach(i => {
						i.fhArticleVo.content = this.delHtmlTag(i.fhArticleVo.content)
					})
					this.wordList = res.rows; //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total); //隐藏加载状态
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			// 删除html标签,只显示文字
			delHtmlTag(str) {
				return str.replace(/<\/?.+?>/g, "").replace(/&nbsp;/g, "").replace(/&lt;/g, "").replace(/&gt;/g, "");
			},

2、富文本mp-html的使用

我之前有试过其他富文本，但是效果都不太好，所以选择了这个。

在插件商城里导入文件，然后直接使用即可，不需要引入

html 复制代码

<mp-html :content="content.fhArticleVo.content" />