335291091@qq.com
335291091@qq.com
  • 发布:2018-10-12 15:33
  • 更新:2020-06-30 14:44
  • 阅读:13085

uni-app利用v-html展示富文本内容,图片的宽度溢出屏幕,可否设置为100%?而且视频文件还不能播放,这又怎么解决

分类:uni-app

uni-app利用v-html展示富文本内容,图片的宽度溢出屏幕,可否设置为100%?而且视频文件还不能播放,这又怎么解决?

2018-10-12 15:33 负责人:无 分享
已邀请:
Trust

Trust - 少说废话

  • 2482441058@qq.com

    我使用了rich-text但是图片还是超出了,设置的class不生效

    2018-12-31 00:43

1649793117@qq.com

1649793117@qq.com - 99

直接将后台返回的html代码中含有img的添加一个style属性就好了
html.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');

335291091@qq.com

335291091@qq.com (作者) - android开发工程师、h5开发工程师

(1)利用 rich-text 渲染,那数据节点怎么转换?不是要自行将富文本字符串转换成对应的rich-text数据节点格式?那这个有比较好的转换插件吗?
(2)还有我想编辑富文本文件内容,又要用啥组件呢?

1285076236@qq.com

1285076236@qq.com

我也碰到这个问题,如果要自己转节点那就玩个蛋了。

1469319308@qq.com

1469319308@qq.com

富文本不支持 font-family: font-size:1em; line-height:2em;" sans="" serif",="" tahoma,="" verdana,="" helvetica
这种样式

cq259521@163.com

cq259521@163.com

解决了吗,老哥

18811373023@163.com

18811373023@163.com - 之前做APP端,对于前端还是个新手,请多多指教

遇到同样的问题,请问解决了吗?

一菜鸟一

一菜鸟一

css 样式加上>>> 如

img {
width: 100%;
}

求个赞

  • 一菜鸟一

    img 前加上 >>>

    竟然改变了样式,自已体会吧

    2019-07-17 16:30

  • awls

    回复 一菜鸟一: 服务器返回的img 设置css 并没有什么用

    2019-08-01 18:44

  • 815762247@qq.com

    回复 一菜鸟一: 对,使用 >>> 在浏览器的样式改变了,但是真机的样式没有改变,我的img也是服务器返回的

    2020-01-12 14:31

yq330161646@outlook.com

yq330161646@outlook.com

求问富文本标签 , 有table 超出屏幕范围如何解决

994027025@qq.com

994027025@qq.com

还是没看懂你们咋个解决的呢

2678573188@qq.com

2678573188@qq.com - 没掉头发的程序员宝宝

我也遇到了,解决了吗

2678573188@qq.com

2678573188@qq.com - 没掉头发的程序员宝宝

uni-app的富文本图片溢出问题亲测
<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady">

//zhi
2678573188@qq.com

2678573188@qq.com - 没掉头发的程序员宝宝

v-html="marketContent "
let marketContent = res.data.data.marketContent;//后台给的字段
this.marketContent = marketContent.replace(/\<img/g, '<img style="max-width:100%;height:auto" '); //data里自己定义了一个marketContent ,replace会返回一个新的值

1430115074@qq.com

1430115074@qq.com

要想修改v-html下的样式,要在需要修改的选择器前加上 /deep/

734665222@qq.com

734665222@qq.com

有哪位大佬知道v-html无法识别 iconfont如何解决嘛?

1030637659@qq.com

1030637659@qq.com

html部分:

<rich-text    :nodes="content">       
</rich-text >  

js部分:

     let richtext= res.data.content;  
     let regex = new RegExp('<img', 'gi');  
     richtext= richtext.replace(regex, `<img width="100%"`);              
     this.content = richtext;

h5、微信小程序、真机 测试可用。其他没有测试

参考地址:https://uniapp.dcloud.io/component/rich-text

要回复问题请先登录注册