1. Toy模板网首页
  2. > Toy博客

uniapp实现微信小程序富文本之mp-html插件详解

9月前 作者：梦幻蔚蓝 分类：Toy博客 阅读(34) 违法举报

这篇具有很好参考价值的文章主要介绍了uniapp实现微信小程序富文本之mp-html插件详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1 文章背景

1.1 正则表达式

正则表达式，又称规则表达式,（Regular Expression，在代码中常简写为regex、regexp或RE），是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"），是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串，通常被用来检索、替换那些符合某个模式（规则）的文本。

许多程序设计语言都支持利用正则表达式进行字符串操作。例如，在Perl中就内建了一个功能强大的正则表达式引擎。正则表达式这个概念最初是由Unix中的工具软件（例如sed和grep）普及开来的，后来在广泛运用于Scala 、PHP、C# 、Java、C++ 、Objective-c、Perl 、Swift、VBScript 、Javascript、Ruby 以及Python等等。正则表达式通常缩写成“regex”，单数有regexp、regex，复数有regexps、regexes、regexen。
mp-html编辑插件,Web端+HTML+CSS,uni-app,微信小程序,html

1.2 mp-html插件

功能介绍

  • 支持大部分 html 实体
  • 支持锚点跳转、长按复制等丰富功能
  • 支持设置占位图（加载中、出错时、预览时）
  • 支持丰富的标签（包括 table、video、svg 等）
  • 支持在多个主流的小程序平台和 uni-app 中使用
  • 支持丰富的事件效果（自动预览图片、链接处理等）
  • 丰富的插件（关键词搜索、内容编辑、latex 公式等）
  • 效率高、容错性强且轻量化（≈25KB，9KB gzipped）

1.3 uniapp

uni-app（uni，读you ni，是统一的意思） [2]是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。
产生背景：
DCloud于2012年开始研发小程序技术，优化webview的功能和性能，推出了HBuilder开发工具，为后续产业化做准备。
2015年，DCloud正式商用了自己的小程序，产品名为“流应用”，它不是模式的轻应用，而是能接近原生功能、性能的App，并且即点即用，第一次使用时可以做到边下载边使用。

2 过程详解

2.1 下载mp-html插件

  • 插件市场：
    mp-html一个强大的小程序富文本组件

  • mp-html 富文本组件
    mp-html 富文本组件【全端支持，支持编辑、latex等扩展】

  • mp-html git 地址
    mp-html-GitHub地址

  • 直接导入Hbuilder之后就可以了
    当然，插件市场也有对应教程，可按教程操作。
    mp-html编辑插件,Web端+HTML+CSS,uni-app,微信小程序,html

2.2 项目中引入mp-html

  • 接口数据展示
{
    "total": 18,
    "rows": [
        {
            "createBy": "超级管理员",
            "createTime": "2024-01-11 15:05:49",
            "updateBy": "超级管理员",
            "updateTime": "2024-01-12 15:42:53",
            "remark": null,
            "productId": 25,
            "summaryId": 206,
            "summaryName": "环保信息化软件研发",
            "productTitle": "【企业】e云管家",
            "productType": "text",
            "productContent": "<p><img src=\"https://sdddeesp.com/prod-api/upload/2024/01/12/54231A025.jpg\"></p>",
            "status": "0",
            "coverPhoto": "/upload/2024/01/12/154226A024.jpg",
            "intro": "免费版污染源在线查看、报警终端！",
            "delFlag": "0"
        },
    }

其中重要的参数：

productType：传递的类型包括：link\text

productContent：文章的内容包括富文本和连接。

  • 引入类型

mp-html 引入

<template>
	<view class="content">
	    <view v-if="articleDetail.productType == 'link'"  class="container">
			<!-- 接受的是连接格式 -->
			<web-view :src="articleDetail.productContent"></web-view>
		</view>
		<view v-else  class="are-contnet">
			<!--接受的不是连接格式 -->
			<mp-html :content="strings" selectable="true" show-img-menu="true" />
		</view>
	</view>
</template>

data中重要参数：

data() {
	return {
		strings: '', //用于富文本中间传递的参数
	}
},

method方法：

methods: {
	get_Product(articleTitle){
		// 请求右侧文章列表
		uni.request({
			url: 你的接口url,
			method: "GET",
			success: (article_res) => {
				if(article_res.data.total!=0){
					let artical_data = article_res.data.rows[0];
					this.strings = artical_data.productContent,//这个是必须的，需要将文章内容传递为Strings。
				}
			},
			fail: () => {},
			complete: () => {}
		});
	},
}

通过以上的配置信息，基本可以实现数据的展示，但是还需要一定的优化，有些文本传递的HTML数据，可能有些自带的样式，这就造成数据展示的混乱。

2.3 引入正则规范图片自适应

首先需要在模板里设置一个过滤器

<mp-html :content="strings|formatRichText" selectable="true" show-img-menu="true"/>

过滤器方法：
注意：这个过滤器方法是和onLoad(),和methods方法同级别的。里面用的是一些正则表达式进行筛选。

onLoad: () {},
filters: {
	/**
	 * 处理富文本里的图片宽度自适应
	 * 1.去掉img标签里的style、width、height属性
	 * 2.img标签添加style属性：max-width:100%;height:auto
	 * 3.修改所有style里的width属性为max-width:100%
	 * 4.去掉<br/>标签
	 * @param html
	 * @returns {void|string|*}
	 * 
	 */
	formatRichText(html) { //控制小程序中图片大小
		let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
			match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
			match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
			match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
			return match;
		});
		newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
			match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
				'max-width:100%;');
			return match;
		});
		newContent = newContent.replace(/<br[^>]*\/>/gi, '');
		newContent = newContent.replace(/\<img/gi,
			// '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;" src="https://syqdxs.sdeesp.com');
			'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
		return newContent;
	}
},
methods: {},

上述需要介绍的一点：如果文章中的图片给的路径不是全路径怎么办？比如：

 "productContent": "<p><img src=\"/upload/2024/01/12/A025.jpg\"></p>",

这样会造成mp-html在读取文章图片的时候，由于路径不对，找不到图片，从而不能显示，那该怎么办呢？
这就就要用到正则替换原来的一些内容。

需要用下面的方法对图片相同的地方进行替换

newContent = newContent.replace(/\<img src="/gi,
		'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;" src="https://sdddeesp.com');
	return newContent;
  • 上述正则的意思是
    将文章中所有的<img src=" 替换为：
<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;" src="https://sdddeesp.com

也就是将文中所有的标签的：

<img src=\"https://sdddeesp.com/prod-api/upload/2024/01/12/54231A025.jpg\">

替换为：

<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;" src=\"https://sdddeesp.com/prod-api/upload/2024/01/12/54231A025.jpg\”>

这样图片的路径就变成了全路径，
其他同类型的可是参考这个修改。

2.4 效果展示

mp-html编辑插件,Web端+HTML+CSS,uni-app,微信小程序,html
mp-html编辑插件,Web端+HTML+CSS,uni-app,微信小程序,html
mp-html编辑插件,Web端+HTML+CSS,uni-app,微信小程序,html

3 全部代码

<template>
	<view class="content">
	    <view v-if="articleDetail.productType == 'link'"  class="container">
			<!-- 接受的是连接格式 -->
			<web-view :src="articleDetail.productContent"></web-view>
		</view>
		<view v-else  class="are-contnet">
			<!-- 接受的是其他格式 -->
			<mp-html :content="strings|formatRichText" selectable="true" show-img-menu="true" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				strings: '', //富文本
			}
		},
		onLoad: function(options) {
			uni.showLoading({
				title: '正在加载',
				mask: false
			});
			let articleTitleId = options.articleTitleId 
			this.get_Product(articleTitleId )
		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 * 
			 */
			formatRichText(html) { //控制小程序中图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			}
		},
		methods: {
			// 返回上一页
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			get_Product(articleTitleId ){
				// 请求右侧文章列表
				uni.request({
					url: '你的URL连接'+articleTitleId ,
					method: "GET",
					success: (article_res) => {
						if(article_res.data.total!=0){
							let artical_data = article_res.data.rows[0];
							this.articleDetail = artical_data;
							this.strings = artical_data.productContent,
							console.log("articleDetail",this.articleDetail);
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style>
	.content {padding: 10upx 2%;width: 96%;	flex-wrap: wrap;}
	.title {line-height: 2em;font-weight: 700;font-size: 38upx;}
	.art-content {line-height: 2em;}
	.container {
	  width: 100%;
	  height: 100vh;
	}
</style>
  • articleTitleId 上个页面传递的参数

感谢能看到这里的没一位大佬，我在此宣布：下班！
mp-html编辑插件,Web端+HTML+CSS,uni-app,微信小程序,html文章来源地址https://www.toymoban.com/news/detail-819912.html

到了这里，关于uniapp实现微信小程序富文本之mp-html插件详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序使用mp-html遇到的问题并解决

    1、在本地配置寻找勾选使用npm 查了之后发现2023了 不需要勾选了 默认使用npm 2、在微信小程序编辑器左上角的 工具--构建npm 然后就报错了 于是搜索到以下的内容： 没有找到可以构建的NPM包，请确认需要参与构建的npm都在 `miniprogramRoot` 目录内 --- 微信小程序报错 https://blog.

    2024年02月07日
    浏览(43)
  • 【mp-html】小程序富文本组件（页面内嵌html）

    【mp-html】小程序富文本组件（页面内嵌html）

    显示动态 html 富文本是很多应用必要的需求，小程序平台不支持 dom 操作使得这成为一个难题，其自带的 rich-text 组件支持的标签少且屏蔽所有事件，难以实际应用。因此就有了这样一个能够便捷的在小程序平台上处理富文本的组件，还支持丰富的扩展功能。 提示：以下是m

    2024年02月05日
    浏览(32)
  • uniapp小程序开发-富文本编辑器mp-html，juice外部样式转内联样式

    uniapp小程序开发-富文本编辑器mp-html，juice外部样式转内联样式

    在开发一款公司的小程序过程中，有一个需求：web端后端可以上传word文档，后端转为html字符串；小程序接收显示，并且可以在小程序进行编辑修改。 其实在日常小程序中很少见到富文本编辑器的使用，所以这次使用的过程中也尝试了多种，但是最好用的还是mp-html 这款插件

    2024年02月09日
    浏览(45)
  • uni-app使用富文本组件 mp-html

    uni-app使用富文本组件 mp-html

    目录 安装 npm install mp-html  vue页面 富文本增加js组件  安装 npm install mp-html  vue页面 富文本增加js组件   fuwenben.js 解决连续数字、字母不自动换行 p标签：word-wrap: break-word; 解决pre不自动换行： white-space:pre-wrap; 合并表格的边框：border-collapse: collapse; 前 后

    2024年02月16日
    浏览(40)
  • uniapp - [微信小程序] 实现点击预览各种文件 pdf文档、视频mp4、mp3音乐、图片图像、word/excel/ppt 等，uniapp小程序文件预览功能（详细示例代码，一键复制开箱即用）

    uniapp - [微信小程序] 实现点击预览各种文件 pdf文档、视频mp4、mp3音乐、图片图像、word/excel/ppt 等，uniapp小程序文件预览功能（详细示例代码，一键复制开箱即用）

    在uniapp微信小程序平台开发中，详细实现文件预览功能，支持预览pdf/mp3/mp4/图片/word/excel/ppt等常见文件，在线下载并预览功能。 直接复制运行示例代码，稍微改下就能用了。

    2024年02月04日
    浏览(77)
  • uniapp开发微信小程序，使用微信同声传译插件，实现语音识别输入文本

    uniapp开发微信小程序，使用微信同声传译插件，实现语音识别输入文本

    第一步：现在微信小程序管理后台：“设置”-》“第三方设置”-》“插件管理”中添加插件。 但是这个地方，没有搜索到插件，就到微信服务市场去搜微信服务市场  搜索到以后添加到需要的小程序里面，然后返回管理中心查看，就可以看到了 第二步：在配置文件中引入插

    2024年02月09日
    浏览(64)
  • 微信小程序加载html标签（解析html标签、wxParse加载富文本html）

    微信小程序加载html标签（解析html标签、wxParse加载富文本html）

     博主介绍： 本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮

    2024年02月04日
    浏览(46)
  • uniapp解析富文本（包含图片）微信小程序+app可用

    uniapp解析富文本（包含图片）微信小程序+app可用

     最终效果图： 1、uniapp中，在需要使用的vue界面中  2、在后端php中，将提交保存到数据库的富文本图片路径更改为含http或https的(含自己域名的)，不然图片无法展示。 将 img src=\\\"upload/article/2022/04-03/273e82bf525920976b0aa5d845a59cb9.jpg\\\" alt=\\\"\\\" style=\\\"display:inline-block;height:auto;max-width:100%\\\"

    2024年02月16日
    浏览(30)
  • 微信小程序使用第三方组件wxParse加载富文本html

    微信小程序使用第三方组件wxParse加载富文本html

    微信小程序 微信小程序加载富文本html 微信小程序富文本第三方组件wxParse wxParse 富文本html wxParse 是一个微信小程序富文本解析组件，支持支持Html及markdown转wxml。 wxParse gitHub地址：https://github.com/icindy/wxParse 目前项目已停止维护了，原因未知。 按照gitHub上的指，下载demo之后，

    2024年02月12日
    浏览(55)
  • uniapp多行文本展开或收起（兼容h5、微信小程序，其它未测试）

    uniapp多行文本展开或收起（兼容h5、微信小程序，其它未测试）

    文本过短时隐藏按钮，需要知道文本全部展示的行数 文本收起时，微信小程序不能直接获取文本展示的高度 文本展示时，微信小程序不能直接获取文本收起的高度 所以使用 占位文本 获取单行文本高度，最终通过计算得到文本全部展示时的行数 本文介绍的方法兼容h5、微信

    2024年02月02日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包