加载HTML富文本详情

// 使用 rich-text 加载富文本数据
<rich-text class="richText" :nodes="nodes"></rich-text>

一 .对 H5 中的详情

1. 自适应HTML内容 中的图片大小.

// 全局搜索并替换图片样式
 this.nodes = this.item.content.replace(/<img/gi,'<img style="max-width:100%;height:auto;margin:0 auto;display:block"')

2. 使用增加权重的方式, 修改 HTML 内容中的字体样式, 统一标签文字样式.

    .richText {
        padding: 0rpx 30rpx 0rpx 30rpx;
        // line-height:1.667em;
        // letter-spacing:0.5px;
        text-align:justify;
        word-break: break-all;
        p{
            font-size: 32rpx !important;
            // text-indent: 2em !important;
            text-align: justify !important;
            color: #333333 !important;
            line-height:1.667em !important;
            letter-spacing:0.5px !important;
            word-break: break-all !important;
            // margin-bottom: 28rpx !important;
        }
        span{
            font-size: 32rpx !important;
            text-indent: 2em !important;
            text-align: justify !important;
            color: #333333  !important;
            line-height:1.667em !important;
            letter-spacing:0.5px !important;
            word-break: break-all !important;
        }
    }

二. 对于微信小程序

.1. 自适应HTML内容 中的图片大小.

// content 为后端返回的富文本内容
formatImg(content) {
    if (!content) return '';
        const regex = /<img[^>]*>/g;
        content = content.replace(regex, function(match) {
        return match.replace('>', 'style="max-width:100%;height:auto;">');
        });
    return content;
},

2. 直接使用class增加权重的方式, 修改 HTML 内容中的字体样式, 统一标签文字样式

    .richText {
        padding: 0rpx 30rpx 0rpx 30rpx;
        // line-height:1.667em;
        // letter-spacing:0.5px;
        text-align: justify;
        word-break: break-all;

        font-size: 32rpx !important;
        // text-indent: 2em !important;
        text-align: justify !important;
        color: #333333 !important;
        line-height: 1.667em !important;
        letter-spacing: 0.5px !important;
        word-break: break-all !important;
        // color: red !important;
        // margin-bottom: 28rpx !important;
    }

三. 实现图片和文件的监听

查看官网
我们通过查看官网属性可知, 有个@itemclick事件,可以拦截点击事件（只支持 a、img标签），返回当前node信息 event.detail={node}
具体实现:
注意: @itemclick 只是对 H5 页面有效, 小程序是监听不到的

  <rich-text space="emsp" :nodes="nodes" @itemclick="handleItemClick" ></rich-text>

  /*  item事件处理  */
handleItemClick(e) {
    const type = e.detail.node.name
    if (type == 'a') {
    // 附件下载预览
    let url =  e.detail.node.attrs.href
    let title = e.detail.node.attrs.title
    uni.downloadFile({
        url: url,
        success: (res) => {
            if (res.statusCode === 200) {
                    uni.hideLoading()
                    let filePath = res.tempFilePath;
                    uni.openDocument({
                        filePath: filePath,
                        showMenu: true,
                        success: (res) => {
                            console.log('打开文档成功');
                            },
                          fail: (err) => {
                                console.log('打开失败', err);
                        }
                });
            }
        },
          fail: (err) => {
            uni.hideLoading()
            console.log('下载失败', err);
        }
    });
} else if (type == 'img') {
    //  图片预览
    let url = e.detail.node.attrs.src
    uni.previewImage({
        urls: [url],
        longPressActions: {
        itemList: [],
        success: function(data) {
            // 处理长按保存操作
              }
          }
         })
    } else {
    // 其他类型
    console.log("======= 其他类型:", type)
    }
},

四. 使用 u-parse 在 H5 和小程序段都可以使用, 一劳永逸.

文档地址
图片会自适应.

如果是简单的场景，比如一段简单的文字和图片内容，可以优先使用rich-text组件，在文章内容，商品详情等复杂的文本详情，可以优先使用parse组件。

<u-parse :content="nodes" :tagStyle="style" @imgTap="imgTap" @linkTap="linkTap" :copy-link="false"></u-parse>

// 设置样式
style: {
          // 字符串的形式
          p: "color: red;font-size:32rpx",
          span: "font-size: 30rpx",
      },

// 图片被点击时触发
imgTap() {

}

// 链接被点击时触发
linkTap() {

}