微信小程序的rich-text(富文本)添加样式

微信小程序的rich-text(富文本)添加样式,第1张

它的样式来自rich-text标签或者其父元素的样式,(当两者都有时候册皮,rich-text的优先级更高)州祥差

它的样式来自style的样式,这时候 rich-text标签或者其父元素的样式无效,此时若想宴衡要改变样式,需要用正则表达式为其添加样式。

结果:不生效

结果:当有important时候生效

https://gitee.com/susuhhhhhh/wxmini_demo

一些字体颜色,大小,可以通过纤并给 rich-text 加上class来设置。

但是图片的大做备小设置不了。

用了正则表达式,让输纯竖毁出的富文本中的图片加上了样式。

<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

    })

}


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/8232224.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-14
下一篇 2023-04-14

发表评论

登录后才能评论

评论列表(0条)

保存