小程序
小游戏
企业微信
微信支付
扫描小程序码分享
有个问题请教一下，使用rich-text这个是怎么控制富文本编辑的图片的样式的，我的图片会原尺寸展示，出现横向滚动条！
<view class="goodsdesc_wrapper">
<rich-text nodes="{{richText}}"/>
</view>
这个nodes传的数据richText是后台富文本编辑的数据，里面有图片,有文字，图片尺寸的是原尺寸！请教一下，那个nodes传的数据里面怎么设置attrs属性呢？
13 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
你好，即使是rich-text组件，也很难能傻瓜式地将常见的富文本编辑器的编辑结果直接展示出来。即使是普通网站，展示富文本编辑器的编辑结果，也是要依赖于展示时在页面内附加的样式的啊。这里有两种方案：
改一下富文本编辑器的配置或代码，让它生成img标签的时候，自动附加一些属性；
在服务器端解析一下html，往里面插一些属性。
第一种方案相对容易实现；第二种方案更灵活，因为常常还是难以避免在服务器端解析html。
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
你好，这里需要在设置富文本之前把attr就写在html里面。对于你遇到的问题，我更推荐你给每个img都加个class，然后在外部指定这个class的样式。
这种方法适合我这里的情况，真是太好了~~~~
// 去掉HTML中的class并添加与标签同名的class
var body = `
<img class="image" src="https://whatpixel.com/images/2016/01/bing-new-logo-2016-fullsize.jpg" />
<p>9月10日...</p>
<p class="bigger">大族机器人...</p>
<p>Winner...</p>
<p>欧洲产品设...</p>
`;
var html = body.replace(/class=".*?"/g, '').replace(/<([a-z]+)(\s?)(.*?)>/gm, '<$1 class="$1"$2$3>');
// output:
//<img class="img" src="https://whatpixel.com/images/2016/01/bing-new-logo-2016-fullsize.jpg" />
//<p class="p">9月10日...</p>
//<p class="p" >大族机器人...</p>
//<p class="p">Winner...</p>
//<p class="p">欧洲产品设...</p>"
本来打算用的，但还是换回
wxParse
感谢你的建议，我尝试一下！官方的这个简直就是没什么卵用！
请问我这样替换img中的style样式，但是没有效果，图片还是没有发生变化，和之前一样的，这种该如何解决
本来也想有用 rich-text，结果不能通过外部 css 控制富文本里的内容，期待
我是搞了很久才明白，终于明白怎么使用了。
这个富文本rich-text的组件明显问题多多，官方给的说明简略得可以，而且还不支持video显示，实话说效果真的不好；关于楼主的问题，我是通过replace来解决的，富文本的功能一般是给非程序员使用，往往就是直接点击插入图片，基本不会做什么处理，这里数据通过api返回字符串格式，用replace替换一个style='max-width:100%'进img标签里，就能正常显示，不会‘爆屏’
为什么我的replace报错呀
亲，富文本编辑器和贵站用的这个评论回复的富文本编辑器是一样的，图片就和下面这样直接加进来了，都是所见即所得的样式，试问我如何去给这个图片class，又怎么在编辑的时候设置attr呢，这个rich-text现在放出来是不是并没有什么用，而且这个图片就直接在富文本编辑窗口编辑了，你越说我越是糊涂了现在！真的，看了官方其他的组建和api立马能明白怎么使用，看了这个rich-text这个组建，讲的模糊不清，而且功能真的不完善，唉，我只能是使用第三方插件去解析了！
不是报错，而是里面的图片会按上传的尺寸展示，比如这个富文本编辑的照片上传的尺寸是900px的宽度，他就会有横向滚动条，图片能横向滚动！
正在加载...
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
你好，即使是rich-text组件，也很难能傻瓜式地将常见的富文本编辑器的编辑结果直接展示出来。即使是普通网站，展示富文本编辑器的编辑结果，也是要依赖于展示时在页面内附加的样式的啊。这里有两种方案：
改一下富文本编辑器的配置或代码，让它生成img标签的时候，自动附加一些属性；
在服务器端解析一下html，往里面插一些属性。
第一种方案相对容易实现；第二种方案更灵活，因为常常还是难以避免在服务器端解析html。
你好，这里需要在设置富文本之前把attr就写在html里面。对于你遇到的问题，我更推荐你给每个img都加个class，然后在外部指定这个class的样式。
这种方法适合我这里的情况，真是太好了~~~~
// 去掉HTML中的class并添加与标签同名的classvar body = `<img class="image" src="https://whatpixel.com/images/2016/01/bing-new-logo-2016-fullsize.jpg" /><p>9月10日...</p><p class="bigger">大族机器人...</p><p>Winner...</p><p>欧洲产品设...</p>`;var html = body.replace(/class=".*?"/g, '').replace(/<([a-z]+)(\s?)(.*?)>/gm, '<$1 class="$1"$2$3>');// output://<img class="img" src="https://whatpixel.com/images/2016/01/bing-new-logo-2016-fullsize.jpg" />//<p class="p">9月10日...</p>//<p class="p" >大族机器人...</p>//<p class="p">Winner...</p>//<p class="p">欧洲产品设...</p>"本来打算用的，但还是换回
wxParse
感谢你的建议，我尝试一下！官方的这个简直就是没什么卵用！
请问我这样替换img中的style样式，但是没有效果，图片还是没有发生变化，和之前一样的，这种该如何解决
本来也想有用 rich-text，结果不能通过外部 css 控制富文本里的内容，期待
我是搞了很久才明白，终于明白怎么使用了。
这个富文本rich-text的组件明显问题多多，官方给的说明简略得可以，而且还不支持video显示，实话说效果真的不好；关于楼主的问题，我是通过replace来解决的，富文本的功能一般是给非程序员使用，往往就是直接点击插入图片，基本不会做什么处理，这里数据通过api返回字符串格式，用replace替换一个style='max-width:100%'进img标签里，就能正常显示，不会‘爆屏’
为什么我的replace报错呀
亲，富文本编辑器和贵站用的这个评论回复的富文本编辑器是一样的，图片就和下面这样直接加进来了，都是所见即所得的样式，试问我如何去给这个图片class，又怎么在编辑的时候设置attr呢，这个rich-text现在放出来是不是并没有什么用，而且这个图片就直接在富文本编辑窗口编辑了，你越说我越是糊涂了现在！真的，看了官方其他的组建和api立马能明白怎么使用，看了这个rich-text这个组建，讲的模糊不清，而且功能真的不完善，唉，我只能是使用第三方插件去解析了！
不是报错，而是里面的图片会按上传的尺寸展示，比如这个富文本编辑的照片上传的尺寸是900px的宽度，他就会有横向滚动条，图片能横向滚动！