小程序富文本图片大小问题

文章目录

    • 概要
    • uniapp小程序情况
    • 解决方法及完整示例

概要

在小程序使用富文本或者在nuiapp(小程序的)使用富文本都会转为

<rich-text nodes="<p class="p class">内容</p>></rich-text>

如果是这种情况的话在css里面就使用不了穿透样式了

/deep/{}

uniapp小程序情况

pc:小程序里面的v-html里面什么东西东不能有,包括注释,否则会报错

<view class="dowm"><view class="" v-html="ggDetailForm.msgContent"></view>
</view>

用uniapp写小程序在里面会自动转为

<rich-text nodes="<p class="p class">内容</p>></rich-text>

解决方法及完整示例

使用正则来修改富文本图片样式

	function formatRichText(html){console.log(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(/<p>/gi, '<p class="p_class">').replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');return match;});newContent = newContent.replace(/<br[^>]*\/>/gi, "");newContent = newContent.replace(/<a>/gi, '<a class="p_class "');newContent = newContent.replace(/<li>/gi, '<li class="p_class "');newContent = newContent.replace(/\<p/gi, '<p class="p_class "');newContent = newContent.replace(/\<span/gi, '<span class="p_class "');newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');return newContent;}export default {data() {return {formatRichText:formatRichText,}},methods: {ggDetail(id) {let obj = {id: id,}let that = thisuni.$u.http.get('接口', {params: obj,}).then(res => {if (res.success) {that.ggDetailForm = res.resultif(that.ggDetailForm.content){that.ggDetailForm.content = that.formatRichText(that.ggDetailForm.content)}}})},},}

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

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

相关文章

自动驾驶-BEV感知综述

BEV感知综述 随着自动驾驶传感器配置多模态化、多源化&#xff0c;将多源信息在unified View下表达变得更加关键。BEV视角下构建的local map对于多源信息融合及理解更加直观简洁&#xff0c;同时对于后续规划控制模块任务的开展也更为方便。BEV感知的核心问题是&#xff1a; …

飞书开发学习笔记(八)-开发飞书小程序Demo

飞书开发学习笔记(八)-开发飞书小程序Demo 一.小程序开发概述 1.1 小程序开发概述 飞书开发文档中查看&#xff1a;小程序开发概述 飞书小程序是指可以运行在飞书客户端中的小程序&#xff0c;小程序的一套代码可以适配 Android、iOS、PC 多平台&#xff0c;且用户体验与飞书…

VUE基础的一些实战总结

目录 创建一个 Vue 应用 步骤 1&#xff1a;安装 Node.js 和 npm 步骤 2&#xff1a;安装 Vue CLI 步骤 3&#xff1a;创建 Vue 项目 步骤 4&#xff1a;启动开发服务器 步骤 5&#xff1a;访问应用程序 步骤 6&#xff1a;编辑 Vue 应用 步骤 7&#xff1a;构建和部署…

python3.8 安装 ssl 模块 和 _ctypes 模块

这文章目录 前情提要安装 openssl-1.1.1重新编译安装 python3.8-rpath 编译选项介绍python3.8 跟 python3.10 的区别那要怎么解决这个问题呢&#xff0c;我想到有四种解决方案&#xff1a; 前情提要 我在之前给 python3.10 安装 ssl 模块后以为该步骤 “对于 python3.6、pytho…

uniapp使用Canvas实现电子签名

来源&#xff1a; 公司的一个需求&#xff0c;需要给新注册的会员和客商需要增加签署协议功能&#xff1b; 之前的思路&#xff1a; 1、使用vue-signature-pad来实现电子签名&#xff0c;但是安卓手机不兼容&#xff1b; 2、uniapp插件市场来实现&#xff0c;但是对HBuilderX…

【MMC/SD/SDIO】读写操作

SD 总线是基于命令和数据流&#xff0c;它们由一个开始 Bit 发起&#xff0c;由一个停止 Bit 结束。 Command&#xff1a;命令开始一个操作。命令由 Host 驱动&#xff0c;或者给单卡&#xff08;寻址命令&#xff09;&#xff0c;或者给所有连接的卡&#xff08;广播命令&…

决策树的Boosting策略是什么

在决策树的Boosting策略中&#xff0c;最常见的算法是梯度提升决策树&#xff08;Gradient Boosting Decision Trees&#xff0c;简称GBDT&#xff09;。GBDT是一种集成学习方法&#xff0c;通过串行训练多个决策树&#xff0c;并根据前一个树的预测结果来调整下一个树的训练目…

【Linux网络】工作环境救急——关于yum安装的5个花式操作

目录 1、只下载不安装&#xff0c;离线安装软件 2、自行打包创建元数据 第一步&#xff1a;先准备好nginx的软件包&#xff0c;放在一个文件夹下 第二步&#xff1a;在本地下载createrepo命令软件&#xff0c;用于创建元信息&#xff0c;这个一定是对包的上一级目录使用命令…

无线WiFi安全渗透与攻防(六)之WEP破解-Gerix-wifi-cracker自动化破解WEP加密

WEP破解-Gerix-wifi-cracker自动化破解WEP加密 WEP破解-Gerix-wifi-cracker自动化破解WEP加密1.环境准备1.软件和kali2.下载软件,下载地址3.将软件复制到kali,解压4.进入软件目录2.破解步骤1.启动gerix-wifi-cracker-2-master软件2.设置无线网卡位Monitor Mode模式3.重新扫描…

【Python 千题 —— 基础篇】输出列表平均值

题目描述 题目描述 输出列表的平均值。题中有一个包含数字的列表 [19, 39, 130, 48, 392, 101, 92]&#xff0c;使用 for 循环输出这个列表中所有项的平均值。 输入描述 无输入。 输出描述 输出列表的平均值。 示例 示例 ① 输出&#xff1a; 列表的平均值是&#xf…

【Android】导入三方jar包/系统的framework.jar

1.Android.mk导包 1).jar包位置 与res和src同一级的libs中(没有就新建) 2).Android.mk文件 LOCAL_STATIC_ANDROID_LIBRARIES&#xff1a;android静态库&#xff0c;经常用于一些support的导包 LOCAL_JAVA_LIBRARIES&#xff1a;依赖的java库&#xff0c;一般为系统的jar…

【MySQL学习笔记-001】- 创建表、插入数据、查看数据库结构

创建employees表 当创建一个表时&#xff0c;需要指定表的名称和每个列的名称和数据类型。以下是一个示例SQL语句&#xff0c;用于创建一个名为"employees"的表&#xff0c;其中包含员工ID、姓名、职位和工资等列&#xff1a; CREATE TABLE employees (employee_id…

PCA降维Python demo

读这篇15年CVPR的文章&#x1f923;&#x1f923;&#x1f923;&#x1f923;&#x1f923; inproceedings{liu2015sparse,title{Sparse convolutional neural networks},author{Liu, Baoyuan and Wang, Min and Foroosh, Hassan and Tappen, Marshall and Pensky, Marianna},…

相机突然断电,保存的DAT视频文件如何修复

3-7 本文主要解决因相机突然断电导致拍摄的视频文件损坏的问题。 在平常使用相机拍摄视频&#xff0c;比如用单反相机、无人机拍摄视频的时候&#xff0c;如果电池突然断电&#xff0c;或者突然炸机了&#xff0c;就非常有可能会得到一个损坏的视频文件&#xff0c;比如会产生…

事务隔离级别和MVCC

1. 事务隔离级别和MVCC 1.1 事务并发执行时的一致性问题 &#xff08;1&#xff09;脏写 事务修改了另一个未提交事务修改过的数据&#xff1b; 这里的一致性是&#xff1a;假设每个事务都遵守将变量 x 和 y 始终设置为相同值&#xff0c;操作序列如下所示&#xff1a; T1…

【Vue配置项】 computed计算属性 | watch侦听属性

目录 前言 computed计算属性 什么是计算属性&#xff1f; Vue的原有属性是什么&#xff1f; 得到的全新的属性是什么&#xff1f; 计算属性怎么用&#xff1f; 计算属性的作用是什么&#xff1f; 为什么说代码执行率高了&#xff1f; computed计算属性中的this指向 co…

Express.js 与 Nest.js对比

Express.js 与 Nest.js对比 自从 Node.js 发布以来&#xff0c;Javascript 在后端领域的使用有所增加。由于 Node.js 的使用越来越多&#xff0c;每天都会有新的框架和工具发布。Express 和 Nest 是使用 Node.js 创建后端应用程序的最著名的框架之一&#xff0c;在本文中&…

【前段基础入门之】=>CSS3新特性 响应式布局

文章目录 概念媒体查询媒体类型媒体特性媒体运算符 概念 所谓对响应式布局方案的理解&#xff0c;众说纷纭&#xff0c;核心点就是同一套代码在不同尺度屏幕下的布局呈现方式的不同 社区中有很多人分享&#xff0c;并列出了多种实现响应式布局的方案&#xff0c;比如【 rem&…

基于ssm+vue员工工资管理系统

基于ssmvue员工工资管理系统 摘要 随着信息技术的不断发展&#xff0c;各行各业对于高效管理和利用数据的需求也日益增长。员工工资管理系统作为企业管理中的一个重要组成部分&#xff0c;对于实现工资信息的精确计算、及时发放和有效管理具有重要意义。本文基于SSM&#xff08…

消息中间件概述

概述 消息队列已经逐渐成为企业IT系统内部通信的核心手段。它具有低耦合、可靠投递、广播、流量控制、最终一致性等一系列功能&#xff0c;成为异步RPC的主要手段之一。当今市面上有很多主流的消息中间件&#xff0c;如ActiveMQ、RabbitMQ&#xff0c;Kafka&#xff0c;还有阿里…