分享最实用的技术,创造更大的价值

vue中富文本rich-text样式设置不生效解决方案

在小程序、vue中通过v-html、rich-text显富文本内容,遇到了设置富文本样式不生效问题,解决方案如下:


1,去掉<style>标签的scoped属性;

2,使用 /deep/深度作用选择器 (案例如下);

.fwb{
    // 在需要设置样式的富文本dom样式前添加 /deep/
    /deep/
    img{
        margin-top:50px;
        width:100%;
    }


注意,以上方法适用于H5,不适用小程序,小程序rich-text属于一个标签,需要进行内容替换,如:

_body = _body.replace(/\<img/gi, '<img style="max-width:100%;height:auto;" ');


联系
QQ
电话
咨询电话:189-8199-7898
TOP