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

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

1.1. rich-text 文本首行缩进

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

javascript 复制代码
//页面上加载
<rich-text :nodes="goodsDetail.detail"></rich-text>
javascript 复制代码
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. 解决方案

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

javascript 复制代码
<rich-text :nodes="repairRichText('<b>您的富文本内容</b>')" />
javascript 复制代码
/**
 * 修复富文本图片宽度
 * @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:auto
    newContent = newContent.replace(/\<img/gi,
        '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
    )
    // return
    return newContent;
}
相关推荐
望风的懒蜗牛1 小时前
android studio开发UniComponent<SurfaceView>组件
android·uni-app·android studio
2501_916007472 小时前
Fastlane 结合 开心上架 命令行版本实现跨平台上传发布 iOS App
android·ios·小程序·https·uni-app·iphone·webview
iOS阿玮2 小时前
请及时同意苹果开发者协议,避免影响迭代工作。
uni-app·app·apple
00后程序员张3 小时前
iOS 26 内存占用监控 多工具协同下的性能稳定性分析实战
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915909064 小时前
iOS 26 性能监控工具有哪些?多工具协同打造全方位性能分析体系
android·macos·ios·小程序·uni-app·cocoa·iphone
Felicity_Gao5 小时前
uni-app 开发APP应用媒体处理与文件管理功能
java·uni-app·媒体
2501_915918416 小时前
uni-app 上架 iOS 应用全流程 从云打包到开心上架(Appuploader)免 Mac 上传发布指南
android·macos·ios·小程序·uni-app·iphone·webview
2501_915921437 小时前
iOS 抓包工具有哪些,开发者的选型与实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915918417 小时前
iOS 26 应用管理实战 多工具协同构建开发与调试的高效体系
macos·ios·小程序·uni-app·objective-c·cocoa·iphone
游戏开发爱好者89 小时前
iOS 抓包工具实战 开发者的工具矩阵与真机排查流程
android·ios·小程序·https·uni-app·iphone·webview