字体的样式处理 可以伍知让通过 给rich-text添加类名猛穗设置字体样式
图片的样式(自适应)
获取的html标签字符串.replace(/<img/g, '<img style="max-width:100%height:autodisplay:blockmargin:10px 0"')
它的样式来自rich-text标签或者其父元素的样式,(当两者都有时候册皮,rich-text的优先级更高)州祥差
它的样式来自style的样式,这时候 rich-text标签或者其父元素的样式无效,此时若想宴衡要改变样式,需要用正则表达式为其添加样式。
结果:不生效
结果:当有important时候生效
https://gitee.com/susuhhhhhh/wxmini_demo
<p :class="item.isMore == true ? 'richText' : 'minH'" v-if="isShow"
v-html="contentConv(item.storyContent)">
</p>
直接在css中加max-width:100%height:auto。没有生效
方式一:在style中追加 max-width:100%height:auto,此方法优点灵活,对于content中所有图片都起作用
// 文章html正则追加max-width
contentConv(content) {
return content.replace(/<(img).*?(\/>|<早桥散\/img>)/g, function(mats) {
if (mats.indexOf('style') <0) {
return mats.replace(/<\s*img/, '<img style="max-width:100%height:auto"')
} else {
return mats.replace(/style=("|')/, 'style=$1max-width:100%height:auto')
}
})
},
方式二:此方法会破坏图片设置的样式,消基再设置style="max-width:100%height:auto"
contentConv(content) {
return content.replace(/<陆氏img[^>]*>/gi, function (match, capture) {
return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, 'style="max-width:100%height:auto"') // 替换style
})
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)