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

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

  • 1 文章背景
    • 1.1 正则表达式
    • 1.2 mp-html插件
    • 1.3 uniapp
  • 2 过程详解
    • 2.1 下载mp-html插件
    • 2.2 项目中引入mp-html
    • 2.3 引入正则规范图片自适应
    • 2.4 效果展示
  • 3 全部代码

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。
在这里插入图片描述

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之后就可以了
    当然，插件市场也有对应教程，可按教程操作。
    在这里插入图片描述

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 效果展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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 上个页面传递的参数

感谢能看到这里的没一位大佬，我在此宣布：下班！
请添加图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/631901.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

算法刷题——删除排序链表中的重复元素（力扣）

算法刷题——删除排序链表中的重复元素（力扣）

文章目录 题目描述我的解法思路结果分析 官方题解分析 查漏补缺更新日期参考来源 题目描述 传送门 删除排序链表中的重复元素&#xff1a;给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。 示例 1&…
阅读更多...
【CA】《Coordinate Attention for Efficient Mobile Network Design》

【CA】《Coordinate Attention for Efficient Mobile Network Design》

CVPR-2021 github&#xff1a;https://github.com/Andrew-Qibin/CoordAttention 文章目录 1 Background and Motivation2 Related Work3 Advantages / Contributions4 Method5 Experiments5.1 Datasets and Metrics5.2 Ablation Studies5.3 Comparison with Other Methods5.4 …
阅读更多...
【华为 ICT HCIA eNSP 习题汇总】——题目集2

【华为 ICT HCIA eNSP 习题汇总】——题目集2

1、交换机某个端口配置信息如下&#xff0c;则此端口的PVID为&#xff08;&#xff09;。 A、100 B、2 C、4 D、1 # interface GigabitEthernet0/0/1 port hybrid tagged vlan 2 to 3 100 port hybrid unatgged vlan 4 6 #考点&#xff1a;VLAN&#xff08;虚拟局域网&#xff…
阅读更多...
josef约瑟 三相电压继电器 WY-35A4 100V DC220V 导轨安装

josef约瑟 三相电压继电器 WY-35A4 100V DC220V 导轨安装

三相 WY-35A4电压继电器&#xff1b;WY-35B4电压继电器&#xff1b;WY-35C4电压继电器&#xff1b;WY-31A4电压继电器&#xff1b;WY-31B4电压继电器&#xff1b; WY-31C4电压继电器&#xff1b;JY-45A4电压继电器&#xff1b;JY-45B4电压继电器&#xff1b;JY-45C4电压继电器…
阅读更多...
Tortoise-orm 使用 (一) 创建表

Tortoise-orm 使用 (一) 创建表

项目基于Vue3.0, FastAPI的模板管理系统&#xff0c;从网上找了各种资源去实践&#xff0c;现在将总结发出来&#xff0c;分享给大家&#xff0c;希望帮助大家少走些弯路。 准备工作 # tortoise-orm pip install tortoise-orm # MySQL pip install tortoise-orm[asyncmy] # 迁…
阅读更多...
Python实现自动化办公（使用第三方库操作Excel）

Python实现自动化办公（使用第三方库操作Excel）

1 使用 xlrd 读取Excel数据 1.1 获取具体单元格的数据 import xlrd# 1. 打开工作簿 workbook xlrd.open_workbook("D:/Python_study_projects/Python自动化办公/Excel/test1.xlsx") # 2. 打开工作表 sheet1 workbook.sheets()[0] # 选择所有工作表中的第一个 # …
阅读更多...
多文件转二维码的两种方式，有兴趣的了解一下

多文件转二维码的两种方式，有兴趣的了解一下

多个文件能一键生成二维码吗&#xff1f;二维码是现在很多人用来展示文件内容的一种手段&#xff0c;在制作二维码图片之后&#xff0c;其他人扫码就可以查看文件或者下载文件&#xff0c;有效的提升文件获取的效率。一般情况下&#xff0c;文件二维码分为多个文件生成一个二维…
阅读更多...
Flutter：跨平台移动应用开发的未来

Flutter：跨平台移动应用开发的未来

Flutter&#xff1a;跨平台移动应用开发的未来 引言 Flutter的背景和概述 Flutter是由Google开发的一个开源UI工具包&#xff0c;用于构建漂亮、快速且高度可定制的移动应用程序。它于2017年首次发布&#xff0c;并迅速引起了开发者们的关注。Flutter采用了一种全新的方法来…
阅读更多...
【vue3项目初始化配置】vue3 + element plus

【vue3项目初始化配置】vue3 + element plus

项目初始化是开发过程中很重要的一个环节&#xff0c;本篇博客带大家从零开始创建并初始化一个vue3项目&#xff0c;文章详细介绍了每个步骤&#xff0c;希望能帮助刚接触开发的小伙伴。 目录 一.创建项目 二.安装插件 ​编辑 ​编辑三.安装依赖 ​编辑 ​编辑四.配置项目 …
阅读更多...
如何安装配置VisualSVN服务并实现公网访问本地服务【内网穿透】

如何安装配置VisualSVN服务并实现公网访问本地服务【内网穿透】

文章目录 前言1. VisualSVN安装与配置2. VisualSVN Server管理界面配置3. 安装cpolar内网穿透3.1 注册账号3.2 下载cpolar客户端3.3 登录cpolar web ui管理界面3.4 创建公网地址 4. 固定公网地址访问 前言 SVN 是 subversion 的缩写&#xff0c;是一个开放源代码的版本控制系统…
阅读更多...
班主任在班级管理中的角色定位

班主任在班级管理中的角色定位

你是否曾经想过&#xff0c;为什么有的班主任能够让学生如此敬爱&#xff0c;而有的班主任却让学生敬而远之&#xff1f;其实&#xff0c;这都与班主任在班级管理中的角色定位有关。 班主任应该是学生的良师益友。这意味着班主任不仅要传授知识&#xff0c;更要关心学生的成长…
阅读更多...
提升线上会议效率，解决Teams会议中常见网络问题

提升线上会议效率，解决Teams会议中常见网络问题

在企业组网场景中&#xff0c;在线会议是混合办公、跨地区办公模式下很重要的协作沟通手段&#xff0c;而在线会议如Teams这类应用对网络的实时性和即时性要求非常高&#xff0c;网络频繁中断、接入速度慢、登不进去等问题分分钟加剧用户的不满&#xff0c;导致汇报失败或者是交…
阅读更多...
GMT学习记录

GMT学习记录

我主要根据GMT中文手册一步一步学习的&#xff01;&#xff01;&#xff01;&#xff01;B站视频介绍的是5.0老版本仅仅建立基础理解这个软件。 好的&#xff0c;学了一点发现直接把gmt转为shp&#xff0c;就得到我想的文件 gmt数据转shape格式数据 - 简书 (jianshu.com) 命…
阅读更多...
汽车用螺纹紧固件的拧紧力矩规范主要考虑哪些方面——SunTorque智能扭矩系统

汽车用螺纹紧固件的拧紧力矩规范主要考虑哪些方面——SunTorque智能扭矩系统

在汽车制造过程中&#xff0c;螺纹紧固件是连接和固定各个零部件的重要元件。为了保证汽车的可靠性和安全性&#xff0c;对于螺纹紧固件的拧紧力矩有着严格的规定和规范。SunTorque智能扭矩系统和大家一起掌握这一重要知识点。 拧紧力矩是指将螺纹紧固件拧紧到预定位置所需的力…
阅读更多...
Pytorch实战——2、初探张量

Pytorch实战——2、初探张量

&#x1f345; 写在前面 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;这里是hyk写算法了吗&#xff0c;一枚致力于学习算法和人工智能领域的小菜鸟。 &#x1f50e;个人主页&#xff1a;主页链接&#xff08;欢迎各位大佬光临指导&#xff09; ⭐️近…
阅读更多...
二叉树的遍历 Java

二叉树的遍历 Java

二叉树的遍历 递归法前序遍历中序遍历后序遍历改进 迭代法前序、后序遍历中序遍历 二叉树的统一迭代法(未完成)Java 中 null、NULL、nullptr 区别 public class TreeNode {int val;TreeNode left;TreeNode right;TreeNode() {}TreeNode(int val) { this.val val; }TreeNode(in…
阅读更多...
Go 语言中高效切片拼接和 GO 1.22 提供的新方法

Go 语言中高效切片拼接和 GO 1.22 提供的新方法

Table Contents 切片拼接的必要性基本拼接方法及其局限性使用 append 函数高效拼接的策略控制容量和避免副作用利用 Go 1.22 的新特性切片动态扩容的深入理解内存重新分配与数据迁移性能优化策略结论在 Go 语言中，切片拼接是一项常见的操作，但如果处理不当，可能会导致性能问…
阅读更多...
2.【Linux】（进程的状态||深入理解fork||底层剖析||task_struct||进程优先级||并行和并发||详解环境变量）

2.【Linux】（进程的状态||深入理解fork||底层剖析||task_struct||进程优先级||并行和并发||详解环境变量）

一.进程 1.进程调度 Linux把所有进程通过双向链表的方式连接起来组成任务队列&#xff0c;操作系统和cpu通过选择一个task_struct执行其代码来调度进程。 2.进程的状态 1.运行态&#xff1a;pcb结构体在运行或在运行队列中排队。 2.阻塞态&#xff1a;等待非cpu资源就绪&am…
阅读更多...
学习JavaEE的日子 day14 继承，super()，this()，重写

学习JavaEE的日子 day14 继承，super()，this()，重写

Day14 1.继承的使用 理解&#xff1a;子类继承父类所有的属性和方法 使用场景&#xff1a;多个类似的类&#xff0c;有相同的属性和方法&#xff0c;就可以把相同属性和方法抽取到父类 优点&#xff1a;减少代码的冗余&#xff1b; 使类与类之间产生了关系(多态的前提) 缺点&a…
阅读更多...
RT-Thread Studio学习（十三）DAC

RT-Thread Studio学习（十三）DAC

RT-Thread Studio学习&#xff08;十三&#xff09;DAC 一、简介二、新建RT-Thread项目并使用外部时钟三、启用DAC四、测试五、总结 一、简介 本文将基于STM32F407VET芯片介绍如何在RT-Thread Studio开发环境下使用DAC设备。硬件及开发环境如下&#xff1a; OS WIN10STM32F40…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023