当前位置：首页 > news >正文

uniapp 富文本rich-text 文本首行缩进和图片居中

news 2025/8/3 6:11:14

1. uniapp 富文本rich-text 文本首行缩进和图片居中

1.1. rich-text 文本首行缩进

使用 rich-text 组件渲染html格式的代码，常常因为不能自定义css导致文本不能缩进，以及图片不能居中等问题，这里可以考虑使用js的replace方法，替换字符串，然后在渲染的同时加载行内样式。

//页面上加载
<rich-text :nodes="goodsDetail.detail"></rich-text>

var richtext=  this.goodsDetail.detail;
const regex = new RegExp('<img', 'gi');
richtext = richtext.replace(regex, `<img style="max-width:100%;height:auto;display:block;"`);
this.goodsDetail.detail = richtext;

replace里的g表示全局替换，而每个关键词前面的\则为转义字符，在针对html类的标签替换的时候，是必不可少的。这个方法还支持拓展关键词增加如果有需求可以自行添加，需要自定义的css样式则可以在所替换的字符串关键词里定义。

1.2. 富文本图片居中

1.2.1. 问题

uni-app - 完美解决 rich-text 富文本解析图片无法自适应宽高问题，图片超出屏幕宽度且不受控。

1.2.2. 解决方案

对显示前的富文本数据，使用正则进行替换处理图片标签，加入自适应属性样式。

<rich-text :nodes="repairRichText('<b>您的富文本内容</b>')" />

/*** 修复富文本图片宽度* @description 解决图片宽高超出显示不全问题(让其自适应)* @param {String} html - 富文本* @return String*/
repairRichText(html) {// 去掉<img>中style /width / height属性let newContent = html.replace(/<img[^>]*>/gi, (match) => {match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '')match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '')match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '')// 去除 style=""这样的属性(非必须,不需要可自行注释)match = match.replace(/style\s*=\s*(["'])(?:(?!\1).)*\1/gi, '')return match})// 修改所有style里的width属性为max-width:100%newContent = newContent.replace(/style="[^"]+"/gi, (match) => {match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;')return match})// 去掉所有<br/>标签newContent = newContent.replace(/<br[^>]*\/>/gi, '')// img标签添加style属性：max-width:100%;height:autonewContent = newContent.replace(/\<img/gi,'<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"')// returnreturn newContent;
}