【uniapp】富文本

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

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

 直接上代码

//内容显示
<view>{
   
   {item.fhArticleVo.content}}</view>
// 下拉刷新
			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的使用

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

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

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

猜你喜欢

转载自blog.csdn.net/Qxn530/article/details/134055522