uniapp 中的 rich-text 富文本 怎样编辑修改 样式

合集 - uniapp系列(2)

1.uniapp 中的 rich-text 富文本 怎样编辑修改 样式2023-05-09

2.uniapp中小程序如何跳转其他小程序2023-05-12

收起

1.首先在 HTML 中 

<rich-text :nodes="formatRichText(newObjc)"></rich-text>

2.在 methods 中 写入方法

            formatRichText(html) {
　　　　　　　　　　// html 就是你要传进来地富文本参数
                // 去掉img标签里的style、width、height属性
                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;
                });
                // 修改所有style里的width属性为max-width:100%
                newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
                    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:0px auto;"');
　　　　　　　　　　// 返回 处理后地结果
                return newContent;
            },