【uniapp】Rich text

1. Rich text display, only text is displayed, and the rest of the html is not displayed.

Function: The red box is actually a rich text with pictures and the like. But now I don't want to display it based on html, only text.

 Directly upload the code

//内容显示
<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. Use of rich text mp-html

I have tried other rich text before, but the results were not very good, so I chose this one.

Import the file in the plug-in mall and use it directly without importing it.

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

Guess you like

Origin blog.csdn.net/Qxn530/article/details/134055522
Recommended