微信小程序rich-text富文本图片img及文字样式控制,在看了官方文档怎么试了都没有效果,因为富文本出来的标签是带行内样式的不是纯的html标签,所以得想办法去掉富文件里的行内样式,只能用正则字符删除替换。
wxml文件代码:
<rich-text nodes="{{line_details}}"></rich-text>
.js文件代码:
Page({
data: {
line_details:''
}
....
...
getcontent:function(){
//在这里api获取到内容后
//ayumi
let html_result = '';
let line_html = data.data.extend_info.e_content_2;
if(line_html)
{
html_result = line_html
.replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
// .replace(/<p>/ig, '<p style="text-align:left;">')
.replace(/<img([\s\w"-=\/\.:;]+)((?:(max-height="[^"]+")))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)((?:(max-width="[^"]+")))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)((?:(data-ratio="[^"]+")))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)((?:(data-op="[^"]+")))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)((?:(\/)))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img$1 style="max-width:100%;height:auto"');
}
this.setData({
"line_details": html_result
});
}
})
值得注意的是有时出来图片标签是:
<img src="xxx.jpg" alt="xx" data-op="ff" data-ratio="0.666"> 或<img src="xxx.jpg" alt="xx" data-op="ff" data-ratio="0.666"/>
效果如下:



