小程序
小游戏
企业微信
微信支付
扫描小程序码分享
从后台查出来的富文本数据，使用 rich-text 进行展示时，其中的图片过大，超出屏幕。
真的是一点效果都没有，我都要急疯了，大佬们救救我把，
10 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
/* 富文本样式 */
rich-text{
width: 100%;margin: 16rpx auto;position: relative;display: block;
}
rich-text .span_class{
width: 100%;font-size: 14px; line-height: 20px;
rich-text .p_class{
rich-text .img_class{
width: 100%;height: auto;
function replaceSpecialChar(content) {
content = content.replace(/"/g,'"');
content = content.replace(/&/g, '&');
content = content.replace(/</g, '<');
content = content.replace(/>/g, '>');
content = content.replace(/ /g, ' ');
content = content.replace(/<p/gi, '<p class="p_class" ');
content = content.replace(/<span/gi, '<span class="span_class" ');
content = content.replace(/<img/gi, '<img class="img_class" ');
return content;
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
function parseRich(content) {
const singalList = [
['"', '"'],
['&', '&'],
['<', '<'],
['>', '>'],
[' ', ' ']
];
const tagList = ['p', 'span', 'img', 'a', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'font', 'b', 'i', 'u', 'code', 'table', 'tr', 'td', 'th']
singalList.forEach(i => {
content = content.replace(new RegExp(i[0], 'g'), i[1])
})
tagList.forEach(i => {
content = content.replace(new RegExp(`<${i} `, 'gi'), `<${i} class="rich-${i}-class" `)
这里rich-text解析img时，如果没有给图片设置样式的话，会有一个空的style
如果我们这样单纯的添加一个style样式的话
还是会保留那个空的style
这样相当于没有设style，因为会被后面的空style代替，
所以可以先将img中所有的style属性删除，然后在添加，这样就可以。
wxParse-微信小程序富文本解析自定义组件，可以使用这个组件，git地址https://github.com/icindy/wxParse。
在获取到的富文本字符串里格式化下图片相关的标签删除里面的style，再把处理后的字符串传给组件。具体怎么做自己百度。
刚好遇到了 ，发下我的处理方法吧
//details要处理的内容
const replaceDetail = function(details){
var texts='';//待拼接的内容
while(details.indexOf('<img')!=-1){//寻找img 循环
texts+=details.substring('0',details.indexOf('<img')+4);//截取到<img前面的内容
details = details.substring(details.indexOf('<img')+4);//<img 后面的内容
if(details.indexOf('style=')!=-1 && details.indexOf('style=')<details.indexOf('>')){
texts+=details.substring(0,details.indexOf('style="')+7)+"max-width:100%;height:auto;margin:0 auto;";//从 <img 后面的内容 截取到style= 加上自己要加的内容
details=details.substring(details.indexOf('style="')+7); //style后面的内容拼接
}else{
texts+=' style="max-width:100%;height:auto;margin:0 auto;" ';
texts+=details;//最后拼接的内容
return texts
大哥，在线请求帮助，在线等，急！！！
楼主，这个问题解决了吗，我也是通过样式，width什么的都不能起作用。如果看到希望可以回复下，在线等
图片上传的时候可以给个100%
this.editorCtx.insertImage({
src: this.data.imgUrl + img,
width: '100%'
});
能做个代码片段吗
不能给个CSS？？
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
/* 富文本样式 */
rich-text{
width: 100%;margin: 16rpx auto;position: relative;display: block;
}
rich-text .span_class{
width: 100%;font-size: 14px; line-height: 20px;
}
rich-text .p_class{
width: 100%;font-size: 14px; line-height: 20px;
}
rich-text .img_class{
width: 100%;height: auto;
}
function replaceSpecialChar(content) {
content = content.replace(/"/g,'"');
content = content.replace(/&/g, '&');
content = content.replace(/</g, '<');
content = content.replace(/>/g, '>');
content = content.replace(/ /g, ' ');
content = content.replace(/<p/gi, '<p class="p_class" ');
content = content.replace(/<span/gi, '<span class="span_class" ');
content = content.replace(/<img/gi, '<img class="img_class" ');
return content;
}
function parseRich(content) {const singalList = [['"', '"'],['&', '&'],['<', '<'],['>', '>'],[' ', ' ']];const tagList = ['p', 'span', 'img', 'a', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'font', 'b', 'i', 'u', 'code', 'table', 'tr', 'td', 'th']singalList.forEach(i => {content = content.replace(new RegExp(i[0], 'g'), i[1])})tagList.forEach(i => {content = content.replace(new RegExp(`<${i} `, 'gi'), `<${i} class="rich-${i}-class" `)})return content;}直接
有效
这里rich-text解析img时，如果没有给图片设置样式的话，会有一个空的style
如果我们这样单纯的添加一个style样式的话
还是会保留那个空的style
这样相当于没有设style，因为会被后面的空style代替，
所以可以先将img中所有的style属性删除，然后在添加，这样就可以。
wxParse-微信小程序富文本解析自定义组件，可以使用这个组件，git地址https://github.com/icindy/wxParse。
在获取到的富文本字符串里格式化下图片相关的标签删除里面的style，再把处理后的字符串传给组件。具体怎么做自己百度。
刚好遇到了 ，发下我的处理方法吧
//details要处理的内容
const replaceDetail = function(details){
var texts='';//待拼接的内容
while(details.indexOf('<img')!=-1){//寻找img 循环
texts+=details.substring('0',details.indexOf('<img')+4);//截取到<img前面的内容
details = details.substring(details.indexOf('<img')+4);//<img 后面的内容
if(details.indexOf('style=')!=-1 && details.indexOf('style=')<details.indexOf('>')){
texts+=details.substring(0,details.indexOf('style="')+7)+"max-width:100%;height:auto;margin:0 auto;";//从 <img 后面的内容 截取到style= 加上自己要加的内容
details=details.substring(details.indexOf('style="')+7); //style后面的内容拼接
}else{
texts+=' style="max-width:100%;height:auto;margin:0 auto;" ';
}
}
texts+=details;//最后拼接的内容
return texts
}
大哥，在线请求帮助，在线等，急！！！
楼主，这个问题解决了吗，我也是通过样式，width什么的都不能起作用。如果看到希望可以回复下，在线等
图片上传的时候可以给个100%
this.editorCtx.insertImage({
src: this.data.imgUrl + img,
width: '100%'
});
能做个代码片段吗
https://developers.weixin.qq.com/s/CBKtj0mj7Cc3
不能给个CSS？？