3***@qq.com
3***@qq.com
  • 发布:2018-10-12 15:33
  • 更新:2022-03-12 19:41
  • 阅读:26058

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

分类:uni-app

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

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

Trust - 少说废话

  • 2***@qq.com

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

    2018-12-31 00:43

飘过大山

飘过大山 - 99

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

  • 1***@163.com

    请问一下这个属性怎么加?

    2019-08-29 14:45

  • 飘过大山

    回复 1***@163.com: 用replace方法给img标签添加一个css样式,这样听懂了吗

    2019-08-29 14:56

  • 1***@163.com

    回复 飘过大山: 不会替换,还是不知道怎么替换

    2019-08-29 15:12

  • 1***@163.com

    第一次做前端...

    2019-08-29 15:12

  • 飘过大山

    回复 1***@163.com: 第一次做前端先把js的基础打好

    2019-08-29 15:56

  • 伊豆

    但是如果<img 本身就有style样式,再替换是不是没有效果,这时候还有实现的方式吗

    2020-01-09 21:33

2***@qq.com

2***@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会返回一个新的值

  • 2***@qq.com

    亲测,已实现

    2019-12-05 15:43

  • YFarer

    真机测试不行

    2019-12-10 11:20

3***@qq.com

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

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

1***@qq.com

1***@qq.com

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

  • 1***@qq.com

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

    2019-03-23 11:16

  • c***@163.com

    回复 1***@qq.com: 不管用 电脑是好了的,手机不管用

    2019-06-26 13:22

1***@qq.com

1***@qq.com

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

  • h***@163.com

    同一样的问题,尴尬了。用uparse 性能又不行

    2019-07-02 16:53

c***@163.com

c***@163.com

解决了吗,老哥

1***@163.com

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

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

一菜鸟一

一菜鸟一

css 样式加上>>> 如

img {
width: 100%;
}

求个赞

  • 一菜鸟一

    img 前加上 >>>

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

    2019-07-17 16:30

  • awls

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

    2019-08-01 18:44

  • 8***@qq.com

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

    2020-01-12 14:31

y***@outlook.com

y***@outlook.com

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

9***@qq.com

9***@qq.com

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

2***@qq.com

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

我也遇到了,解决了吗

2***@qq.com

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

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

//zhi
1***@qq.com

1***@qq.com

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

7***@qq.com

7***@qq.com

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

1***@qq.com

1***@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

凌康

凌康

其实这个也是比较尴尬的一个事情,因为用替换不支持replaceAll全部替换:

uniapp不支持replaceAll:'不支持replaceAll'.replaceAll('xxx','aaaa')
顾可以后台先替换好内容!

要回复问题请先登录注册