收藏
回答

rich-text如何控制富文本编辑的内容的样式?

问题模块
API和组件

有个问题请教一下,使用rich-text这个是怎么控制富文本编辑的图片的样式的,我的图片会原尺寸展示,出现横向滚动条!

<view class="goodsdesc_wrapper">
  <rich-text nodes="{{richText}}"/>
</view>

这个nodes传的数据richText是后台富文本编辑的数据,里面有图片,有文字,图片尺寸的是原尺寸!请教一下,那个nodes传的数据里面怎么设置attrs属性呢?

最后一次编辑于  2017-07-13  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

13 个回答

  • LastLeaf
    LastLeaf
    2017-07-14

    你好,这里需要在设置富文本之前把attr就写在html里面。对于你遇到的问题,我更推荐你给每个img都加个class,然后在外部指定这个class的样式。

    2017-07-14
    赞同 11
    回复 1
    • 王月
      王月
      01-05

      这种方法适合我这里的情况,真是太好了~~~~

      01-05
      赞同
      回复
  • 一曲琴殇
    一曲琴殇
    2017-07-17

    感谢你的建议,我尝试一下!官方的这个简直就是没什么卵用!

    2017-07-17
    赞同 11
    回复
  • 小黄人
    小黄人
    2018-04-19

    本来打算用的,但还是换回

    wxParse



    2018-04-19
    赞同 11
    回复
  • yansen😊
    yansen😊
    2017-07-13

    歪个楼,请问,你们是怎么生成 node 数据的。我看 api 上不是可以直接使用 html 吗? 为什么还要用 node 格式呢

    2017-07-13
    赞同
    回复
  • 一曲琴殇
    一曲琴殇
    2017-07-13

    我的这个数据是从后台富文本编辑的,现在就是不知道怎么控制样式,富文本编辑的东西返回来后就是下面的这个样子

    "<h2 style=\"margin:0px;padding:0px;font-size:16px;font-family:&quot;font-weight:normal;width:450px;word-break:break-all;word-wrap:break-word;font-stretch:normal;color:#323232;white-space:normal;background-color:#FFFFFF;\">\r\n\t<img src=\"http://xxxxxxxxxxxxxx/editor/images/201703171549239389.png\" alt=\"\" /><img src=\"http://xxxxxxxxxxxxxx/editor/images/201703171112123939.jpg\" alt=\"\" /><img src=\"http://xxxxxxxxxxxxx/editor/images/201703171112247689.jpg\" alt=\"\" /><img src=\"http://xxxxxxxxxxxxxx/editor/images/201703171112333470.jpg\" alt=\"\" /><br />\r\n</h2>"


    2017-07-13
    赞同
    回复
  • yansen😊
    yansen😊
    2017-07-14

    这个不能直接放到 rich-text 上吗? 还需要做转换? 直接放到上面会报错?

    2017-07-14
    赞同
    回复
  • 一曲琴殇
    一曲琴殇
    2017-07-14

    不是报错,而是里面的图片会按上传的尺寸展示,比如这个富文本编辑的照片上传的尺寸是900px的宽度,他就会有横向滚动条,图片能横向滚动!

    2017-07-14
    赞同
    回复
  • 一曲琴殇
    一曲琴殇
    2017-07-14

    亲,富文本编辑器和贵站用的这个评论回复的富文本编辑器是一样的,图片就和下面这样直接加进来了,都是所见即所得的样式,试问我如何去给这个图片class,又怎么在编辑的时候设置attr呢,这个rich-text现在放出来是不是并没有什么用,而且这个图片就直接在富文本编辑窗口编辑了,你越说我越是糊涂了现在!真的,看了官方其他的组建和api立马能明白怎么使用,看了这个rich-text这个组建,讲的模糊不清,而且功能真的不完善,唉,我只能是使用第三方插件去解析了!


    2017-07-14
    赞同
    回复
  • LastLeaf
    LastLeaf
    2017-07-14

    你好,即使是rich-text组件,也很难能傻瓜式地将常见的富文本编辑器的编辑结果直接展示出来。即使是普通网站,展示富文本编辑器的编辑结果,也是要依赖于展示时在页面内附加的样式的啊。这里有两种方案:


    1. 改一下富文本编辑器的配置或代码,让它生成img标签的时候,自动附加一些属性;

    2. 在服务器端解析一下html,往里面插一些属性。


    第一种方案相对容易实现;第二种方案更灵活,因为常常还是难以避免在服务器端解析html。

    2017-07-14
    赞同
    回复
  • 懵逼三连嗯?啊?唉?
    懵逼三连嗯?啊?唉?
    2017-07-17

    这个富文本rich-text的组件明显问题多多,官方给的说明简略得可以,而且还不支持video显示,实话说效果真的不好;关于楼主的问题,我是通过replace来解决的,富文本的功能一般是给非程序员使用,往往就是直接点击插入图片,基本不会做什么处理,这里数据通过api返回字符串格式,用replace替换一个style='max-width:100%'进img标签里,就能正常显示,不会‘爆屏’

    2017-07-17
    赞同
    回复 1
    • 焦灼
      焦灼
      2018-09-14

      为什么我的replace报错呀

      2018-09-14
      赞同
      回复