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

文章目录

概要

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

javascript 复制代码
<rich-text nodes="<p class="p class">内容</p>"></rich-text>

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

javascript 复制代码
/deep/{}

uniapp小程序情况

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

javascript 复制代码
<view class="dowm">
	<view class="" v-html="ggDetailForm.msgContent">
	</view>
</view>

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

javascript 复制代码
<rich-text nodes="<p class="p class">内容</p>"></rich-text>

解决方法及完整示例

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

javascript 复制代码
	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 = this
				uni.$u.http
					.get('接口', {
						params: obj,
					})
					.then(res => {
						if (res.success) {
							that.ggDetailForm = res.result
							if(that.ggDetailForm.content){
								that.ggDetailForm.content = that.formatRichText(that.ggDetailForm.content)
							}
							
							
						}
					})
			},


		},
		}
相关推荐
2501_915106324 小时前
App Store 软件上架全流程详解,iOS 应用发布步骤、uni-app 打包上传与审核要点完整指南
android·ios·小程序·https·uni-app·iphone·webview
开发加微信:hedian1166 小时前
微信推客小程序系统开发技术实践
微信·小程序
说私域9 小时前
开源AI智能名片链动2+1模式S2B2C商城小程序在淘宝公域流量运营中的应用研究
人工智能·小程序·开源
2501_916013749 小时前
App 上架全流程指南,iOS App 上架步骤、App Store 应用发布流程、uni-app 打包上传与审核要点详解
android·ios·小程序·https·uni-app·iphone·webview
canglingyue9 小时前
微信小程序加速计开发指南
微信小程序·小程序
SY_FC9 小时前
uniapp发布成 微信小程序 主包内 main.wxss 体积太大
微信小程序·小程序·uni-app
你很易烊千玺10 小时前
即时通讯小程序
小程序·uni-app·直播
前端小白从0开始10 小时前
小程序性能优化
小程序
2501_9159184119 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_9151063219 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview