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 ...
随机推荐
- Caused by: org.gradle.api.internal.plugins.PluginApplicationException: Failed to apply plugin[id:xxx.xxx.xxx]
前言 看下这个完整的bug: Caused by: org.gradle.api.internal.plugins.PluginApplicationException: Failed to appl ...
- js 按照字母进行分组
前言 js 按照字母进行分组的一个实例. 正文 var list = [ { 'name' : '张三', 'py' : 'zhnagsan' }, { 'name' : '李四', 'py' : ' ...
- python读取文件时,删除重复行并计数
from collections import Counterwith open('a.txt', 'r+') as f: a = f.readlines() for i in range(len(a ...
- Filebeat 日志采集工具安装
Filebeat 是比较轻量的日志采集工具,对于一些简单的采集任务可以直接使用 Filebeat 采集,同时也支持很多的方式输出,可以输出至 Kafka.Elasticsearch.Redis 等,下 ...
- 试题B:小球反弹(第十五届蓝桥杯省赛B组c/c++组)
试题B:小球反弹 我在刷博客的时候看见有人分享了蓝桥杯的题目,我想起了我之前大学打蓝桥杯刷题的时光,还是很怀念当时打比赛的氛围,关于这个小球反弹的题目,我感觉很有意思,我一开始也是走了好多弯路,然后去 ...
- 【笔记】join using&AVG
oracle using 在oracle中,using用于简化连接查询,只有当查询是等值连接和连接中的列必须具有相同的名称与数据类型时,才能使用using关键字进行简化 比如原来是 select s. ...
- 基于 Serverless 架构的头像漫画风处理小程序
简介: 当一个程序员想要个漫画风的头像时... 前言 我一直都想要有一个漫画版的头像,奈何手太笨,用了很多软件 "捏不出来",所以就在想着,是否可以基于 AI 实现这样一个功能, ...
- CPU静默数据错误:存储系统数据不丢不错的设计思考
简介: 对于数据存储系统来说,保障数据不丢不错是底线,也是数据存储系统最难的部分.据统计,丢失数据中心10天的企业,93%会在1年内破产.那么如果想要做到数据不丢不错,我们可以采取怎样的措施呢? 作者 ...
- 基于 MaxCompute 的智能推荐解决方案
简介: 在互联网行业红利已过.在获客成本越来越高.在用户在线时长全网基本无增长以及信息大爆炸的情况下,如何更好的转化新用户和提升老用户粘性就变得至关重要,智能化的个性化推荐无疑是经过验证的重要手段之一 ...
- 2018-5-28-WPF-Process.Start-出现-Win32Exception-异常
title author date CreateTime categories WPF Process.Start 出现 Win32Exception 异常 lindexi 2018-05-28 10 ...