uniapp 富文本图片100%显示
下面的这个方法是在百度上找的,但是老是报错,一直没找到原因,索性自己就挨个检查了下,发现在过滤之前需要对传过来的值进行检测,是字符串才能让这个方法执行
filters: {
formatRichText(html) { //控制小程序中图片大小
let newContent = ''
newContent = html.replace(/<img[^>]*>/gi,
function(match) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi,
function(match) {
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
return match;
});
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
return newContent;
}
},
以下为完整方法
filters: {
formatRichText(html) { //控制小程序中图片大小
let newContent = ''
if (typeof(html) == 'string') { //检测值为字符串才能进行replace操作
newContent = html.replace(/<img[^>]*>/gi,
function(match) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi,
function(match) {
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
return match;
});
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
return newContent;
}
}
},
uniapp 富文本图片100%显示的更多相关文章
- java通过freemarker导出包含富文本图片的word文档
废话不多说,进入正题! 本文重点在于:对富文本图片的导出(基础的freemarker+word模板导出这里不做详细解说哈) 参考文章:http://www.cnblogs.com/liaofeifig ...
- v-html渲染富文本图片宽高问题
v-html渲染富文本v-html是用来渲染html的节点及字符串的,但是渲染后富文本里的图片宽高会溢出所在div的区域但是使用css直接给img是没有办法设置img的宽高的,需要使用深层级来给img ...
- jsp富文本图片和数据上传
好记性不如烂笔头,记录一下. 2016的最后一天,以一篇博客结尾迎接新的一年. 此处用的富文本编辑器是wangEditor,一款开源的轻量级的富文本编辑器,这里着重说一下里面的图片上传功能. 服务器端 ...
- UILabel设置富文本后不显示省略号
先描述一下问题,项目中用到了UILabel去显示一段富文本文字,超过label显示区域部分,省略号处理. 但是当设置好 attributedText 给label之后,显示出的效果是文字被切割了,并没 ...
- vue-quill-editor + element-ui upload实现富文本图片上传
代码贴上 <template> <div class="quill-editor-example"> <div class="box&quo ...
- uniapp - 富文本编辑器editor(仅支持App和微信小程序)
uniapp - editor富文本编辑器用法示例 丢几个图,用心看下去(-.-) 这里使用了https://ext.dcloud.net.cn/plugin?id=412 插件,用于选择字体颜色.其 ...
- layui 富文本 图片上传 后端PHP接口
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/ ...
- summernote富文本图片上传,增加视频上传功能、批量上传方法
Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项. 但是却只有图片上传功能,没有视频上传 ...
- 图片 100%显示. img 全部显示.
让每个图片 都铺满 ,同样的大小; 只要给 img 设置 固定的高度, 宽度就可以 了. ----------------------- html: <div class="co ...
- ueditor富文本框图片显示
修改config.json /* 前后端通信相关的配置,注释只允许使用多行方式 */ { /*"physicsPath":"E:/Software/apache-tomc ...
随机推荐
- uni-app上传图片和文件
如图所示: 上传图片,使用的是uni.chooseImage这个官方api,count 数量根据自己的需求来,我们是最多只能上传9张 uploadImgEvent(){ uni.chooseImage ...
- ABP -Vnext框架一步一步入门落地教程——ABP Vnext框架代码安装和启动(一)
兄弟们,人生需要指引,而复制是成功最快的方式,让我们开始行动吧 --codesoft 教程介绍 ABP-Vnext框架我们之前摸了无数次,好象初恋的女孩,一直在靠近,一直在努力,一直不敢盯着她的眼睛说 ...
- 力扣578(MySQL)-查询回答率最高的问题(中等)
题目: 从 survey_log 表中获得回答率最高的问题,survey_log 表包含这些列:id, action, question_id, answer_id, q_num, timestamp ...
- 力扣592(java)-分数加减运算(中等)
题目: 给定一个表示分数加减运算的字符串 expression ,你需要返回一个字符串形式的计算结果. 这个结果应该是不可约分的分数,即最简分数. 如果最终结果是一个整数,例如 2,你需要将它转换成分 ...
- 【pytorch学习】之数据预处理
2 数据预处理 为了能用深度学习来解决现实世界的问题,我们经常从预处理原始数据开始,而不是从那些准备好的张量格式数据开始.在Python中常用的数据分析工具中,我们通常使用pandas软件包.像庞大的 ...
- Java应用结构规范
简介:在Java程序开发中,命名和应用分层无疑是广大后端同胞的两大"痛点",本文提供一种基于领域模型的轻量级应用分层结构设计,供大家参考.下面按分层结构.分层明细.调用关系.各层 ...
- 阿里 BladeDISC 深度学习编译器正式开源
简介:随着深度学习的不断发展,AI模型结构在快速演化,底层计算硬件技术更是层出不穷,对于广大开发者来说不仅要考虑如何在复杂多变的场景下有效的将算力发挥出来,还要应对计算框架的持续迭代.深度编译器就成 ...
- Serverless Devs 的官网是如何通过 Serverless Devs 部署的
简介: 只有自己吃自己的狗粮,自己做的东西才不"".Serverless Devs 自发展之处到现在,已经经历了几个月的时间,在这几个月,Serverless Devs 的成长是迅 ...
- MySQL 深潜 - 一文详解 MySQL Data Dictionary
简介: 在 MySQL 8.0 之前,Server 层和存储引擎(比如 InnoDB)会各自保留一份元数据(schema name, table definition 等),不仅在信息存储上有着重复 ...
- WPF 漂亮的现代化控件 新 ModernWPF 界面库
这是一个在 GitHub 上完全开源的库,有十分漂亮的界面,整个都是 Win10 风,界面部分和默认 UWP 相近 这个库支持了 .NET Framework 4.5 和以上的版本,以及 .NET C ...