微信小程序接收富文本编辑器图片大小解决方法

一、先上案列：

1.图片没有尺寸影响整体布局

二、改完之后：

三、上代码展示

1.wxml

<!--pages/articleInfo/articleInfo.wxml-->
<view class="articleInfo padding15"><rich-text nodes="{{articleInfoArray}}"></rich-text>
</view>

2.js

  //请求协议接口wx.request({url: 请求接口,data: {id:that.data.id},method: "GET",header: {'content-type': 'application/json'},success: function (res) {console.log(res.data.list)wx.hideLoading();if(res.data.data=="success"){var jsonDa = JSON.stringify(res.data.list.content).replace(/<img/gi, "<img class='richImg'");//遍历得到的数据，给img添加CSS和stylevar newResData = JSON.parse(jsonDa);console.log(newResData); //得到的数据含有img标签的都有richImgthat.setData({articleInfoArray:newResData})wx.setNavigationBarTitle({title: res.data.list.title})}}})

3.wxcss

rich-text .richImg{max-width: 100%;max-height: 100%;vertical-align: middle;height: auto!important;width: auto!important;
}

总结：因为通过解析编译，图片有class名字为richImg，我们通过获取从而改变其样式结构，从而达到图片大小进行排版布局

微信小程序接收富文本编辑器图片大小解决方法相关推荐

uniapp 微信小程序 editor富文本编辑器 api 使用记录
文章目录 1.查看官方示例 2.关于富文本编辑器的工具栏 3.自己实践一下效果这里记录一下自己研究学习的结果之前一直使用textarea 来进行内容的编辑.但是局限性还是太多,最近发现了edit ...
微信小程序教程-富文本编辑器editor
效果图: 1.首先进入官方文档的editor地址 https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 2.可点 ...
使用微信小程序editor富文本编辑器（爬坑要点）
编辑器wxml <view class="container" style="height:{{editorHeight}}px;"><edi ...
微信小程序实现富文本编辑器
1.参考官方文档:editor | 微信开放文档在文档最下方有示例代码,如下图: 点击"在开发者工具中预览效果" 2.将示例代码保存至桌面,以便后期操作 3.文件夹中有一下文 ...
小程序处理富文本内图片大小
meetDetail.Companies = meetDetail.Companies.replace(/\<img/gi, '<img style="max-width:100 ...
微信小程序端富文本输入
有个需求是用户端也就是小程序端,需要可以富文本发布文章. 示例: 1. 下载组件-微信小程序editor富文本编辑器组件 2.放在小程序自定义组件文件夹下 3.需要用到的页面引入该组件 "u ...
小程序（二十六）微信小程序解析富文本的几种方式
微信小程序解析富文本html大概有两种方式(我发现的). 两种方法,各有各的优缺点. 一:使用小程序内置标签rich-text 这个标签解析的富文本会保留你在pc端编辑的样式,也就是说,你在pc端编辑 ...
微信小程序rich-text富文本图片
背景: 本地做微信小程序项目,后台通过富文本编辑器编辑内容,在小程序页面展示时使用rich-text遇到了图片不能展示和图片尺寸过大的问题. 问题一:富文本编辑器中的图片无法展示 <rich-t ...
微信小程序富文本解析点击图片放大_微信小程序解析富文本过程详解
前言最近公司在开发OTA微信小程序,一些页面的详情内容是HTML富文本格式的的,但是微信小程序不能直接解析HTML,需要将内容中的HTML标签转换成微信小程序所支持的标签. 开始的时候想过自己写方法 ...

微信小程序接收富文本编辑器图片大小解决方法

一、先上案列：

二、改完之后：

三、上代码展示

微信小程序接收富文本编辑器图片大小解决方法相关推荐

最新文章

热门文章