精华内容
下载资源
问答
  • 优化之前,图片太大 解决方法: 1、在common 目录下新建 index.js: /* graceUI rich-text 加强工具 link : graceui.hcoder.net author : 5213606@qq.com 深海 */ // 正则变量 var graceRichTextReg; // 批量...

    原文:https://blog.csdn.net/chenny_/article/details/115534622

    优化之前,图片太大
    在这里插入图片描述

    解决方法:

    1、在common 目录下新建 index.js:

    /*
    graceUI rich-text 加强工具
    link : graceui.hcoder.net
    author : 5213606@qq.com 深海
    */
     
    // 正则变量
    var graceRichTextReg;
     
    // 批量替换的样式 [ 根据项目需求自行设置 ]
    var GRT = [
    	// div 样式
    	['div', "line-height:2em;"],
    	// h1 样式
    	['h1', "font-size:3em; line-height:1.5em;"],
    	// h2 样式
    	['h2', "font-size:2em; line-height:1.8em;"],
    	// h3 样式
    	['h3', "font-size:1.6em; line-height:2em;"],
    	// h4 样式
    	['h4', "font-size:1.2em; line-height:2em;"],
    	// h5 样式
    	['h5', "font-size:1em; line-height:2em;"],
    	// h6 样式
    	['h6', "font-size:0.9em; line-height:2em;"],
    	// p 样式
    	['p', "font-size:1em; line-height:2em;"],
    	// b 样式
    	['b', "font-size:1em; line-height:2em;"],
    	// strong 样式
    	['strong', "font-size:1em; line-height:2em;"],
    	// code 样式
    	['code', "font-size:1em; line-height:1.2em; background:#F6F7F8; padding:8px 2%; width:96%;"],
    	// img 样式
    	['img', "width:100%; margin:8px 0;"],
    	// blockquote
    	['blockquote', "font-size:1em; border-left:3px solid #D1D1D1; line-height:2em; border-radius:5px; background:#F6F7F8; padding:8px 2%;"],
    	// li 样式
    	['ul', "padding:5px 0; list-style:none; padding:0; margin:0;"],
    	['li', "line-height:1.5em; padding:5px 0; list-style:none; padding:0; margin:0; margin-top:10px;"],
    	// table
    	['table', "width:100%; border-left:1px solid #F2F3F4; border-top:1px solid #F2F3F4;"],
    	['th', "border-right:1px solid #F2F3F4; border-bottom:1px solid #F2F3F4;"],
    	['td', "border-right:1px solid #F2F3F4; border-bottom:1px solid #F2F3F4; padding-left:5px;"]
    ];
     
     
    module.exports = {
    	format : function(html){
    		html = html.replace(/<pre.*pre>?/gis, function(word){
    			word =  word.replace(/[\n]/gi,'<br />');
    			word =  word.replace(/    /gi,'<span style="padding-left:2em;"></span>');
    			return word.replace(/[\t]/gi, '<span style="padding-left:2em;"></span>');
    		});
    		html = html.replace(/<pre/gi, '<p style="font-size:1em; margin:12px 0; line-height:1.2em; background:#F6F7F8; border-radius:5px; padding:8px 4%; width:92%;"');
    		html = html.replace(/<\/pre/gi,"</p");
    		for(let i = 0; i < GRT.length; i++){
    			graceRichTextReg = new RegExp('<'+GRT[i][0]+'>|<'+GRT[i][0]+' (.*?)>', 'gi');
    			html = html.replace(graceRichTextReg , function(word){
    				// 分析 dom 上是否带有 style=""
    				if(word.indexOf('style=') != -1){
    					var regIn = new RegExp('<' + GRT[i][0] + '(.*?)style="(.*?)"(.*?)(/?)>', 'gi');
    					return word.replace(regIn, '<'+ GRT[i][0] +'$1style="$2 ' + GRT[i][1] +'"$3$4>');
    				}else{
    					var regIn = new RegExp('<' + GRT[i][0] + '(.*?)(/?)>', 'gi');
    					return word.replace(regIn, '<'+ GRT[i][0] +'$1 style="' + GRT[i][1] +'$2">');
    				}
    			});
    		}
    		return html;
    	}
    	
    }
    

    2、在组件中引入

    import graceRichText  from '@/common/richText/index.js'
    

    3、格式化富文本内容

    this.content= graceRichText.format(content);
    

    4、效果
    在这里插入图片描述

    展开全文
  • 本文实例为大家分享了小程序富文本提取图片可放大缩小的具体代码,供大家参考,具体内容如下 启发: 因为最近有需求说在小程序商品的详情页里所有图片可以放大缩小,网上好像不好找,就写了篇博客,供大家参考 ...
  • statePic = statePic.replace(/\<img/gi, '<img style="width:100%;height:auto" ');
    statePic = statePic.replace(/\<img/gi, '<img style="width:100%;height:auto" ');
    
    展开全文
  • 最近的一个项目遇到了这个问题,这个问题也很好处理,一段代码就够了: <!-- 以下是 uni-app 代码 --> <rich-text :nodes="(product.exchangeExplain || '').replace(/\<img/gi, '<...

    最近的一个项目遇到了这个问题,这个问题也很好处理,一段代码就够了:

    <!-- 以下是 uni-app 代码 -->
    <rich-text
    	:nodes="(product.exchangeExplain || '').replace(/\<img/gi, '<img style=\'max-width: 100%;height:auto;display:block;\'')"
    ></rich-text>
    

    给 img 设置一下最大宽度就可以了

    阅读原文:小鑫の随笔

    展开全文
  • 富文本编辑的图片在手机,移动端显示图片太大,超出屏幕,出现滚动条,富文本中的图片如何修改样式 var html = res.data.details.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1') ....

    富文本编辑的图片在手机,移动端显示图片太大,超出屏幕,出现滚动条,富文本中的图片如何修改样式

    var html = res.data.details.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
    .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
    .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
    .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
    .replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img style="width: 100%;" $1');
    

    通过正则去除原有img中的样式,使所有的img的宽度为100%,高度自适应。

    展开全文
  • vue处理富文本内容图片

    千次阅读 2019-11-20 10:32:54
    let content = this.extensionList[i].content const regex = new RegExp(', 'gi') this.extensionList[i].content = content.replace(regex, `) 最方便就是对全局图片设置大小 img{ max-width: 100% !important; ...
  • /*覆盖文本编辑器里面的图片的大小*/ uni-rich-text img { max-width: 100% !important; } 2、关于小程序和APP里面图片溢出问题,可以通过正则的方式,给图片添加宽度100%,高度auto的样式 借鉴文章(附上原文:...
  • 1.图片没有尺寸影响整体布局 二、改完之后: 三、上代码展示 1.wxml <!--pages/articleInfo/articleInfo.wxml--> <view class="articleInfo padding15"> <rich-text nodes="{{articleInfoArray}}...
  • 首先正常操作 WebSettings webSettings = mBinding.wvText.getSettings(); webSettings.setJavaScriptEnabled(true); //支持js webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小 ...
  • let newContent = ret.data.replace(/\ { if (!err) { _v.content = htmlNode } }) 正则之后再用parse支付宝富文本处理方式显示(parse用法之前的文章有说到)
  • 最近使用了layedit的富文本,不过出现一个小问题,图片上传后,图片大小不受限制,这就导致,当图片时就会出现编辑器中,图片只会展示部分,而且当展示页渲染时,图片也是按照原始比例展示,这并不是我们想要的...
  • onLoad: function (options) { console.log(options.id) this.bannerDetail(options.id) ...//res.data.data.content 富文本内容 res.data.data.content = res.data.data.content.replace(...
  • 富文本图片缩放css设置

    千次阅读 2019-06-21 09:37:24
    img { max-width: 100%; /*图片自适应宽度*/ } body { overflow-y: scroll !important; } .view { word-break: break-all; } .vote_area { display: block; } .vote_iframe { background-color: transp...
  • 最近在做Android的富文本显示时,使用的是底层的html解析类。 在解析图片时,先从服务器端或得图片资源生成bitmap文件,然后将bitmap文件放入Drawable中,返回Drawable。 问题是: 当图片过多时,在使用创建bitmap的...
  • vue v-html 富文本图片溢出

    千次阅读 2020-07-06 16:16:12
    一、如图:可以看出富文本图片已经溢出屏幕 二、解决方法:使用 ::v-deep{} 深度处理图片 <template> <view class="meeting-detail-intro" v-html="meet.conference_remark"></view> </...
  • 挺久没写了,最近需要在Android上显示富文本,看了网上有两种方法,一种是用TextView一种是WebView,用TextView有一个问题,就是图片的路径问题,因为html文本中有可能给的图片的路径未必是全路径,可能需要自己拼接...
  • 富文本编辑器中添加图片时编辑器会将图片转化成base64的二进制文件,如此造成整个富文本内容非常富文本最后以带html标签的字符串格式存到数据库长字段,回显时将此长字符串查询返回前端通过v-html来渲染成对应...
  • 百度ueditor上传图片超范围后有两个问题,一是编辑器里图片显示不完整,二是添加图片后的网页在显示时也会超出网页不好看。想让它自适应100%,网上的方案能解决第一个问题,基本没有第二个问题的方案,经过多次测试...
  • 之前用layui 富文本编辑器的时候,上传较图片时,图片显示不全,而且编辑起来非常的不便,这样的用户体验是非常不好的,想了好久没想出办法, 1.找到layedi.js 文件 路径:layui/lay/modules/layedit.js,如下图...
  • '文本方向', 'ql-code-block':'代码块', 'ql-formula':'公式', 'ql-image':'图片', 'ql-video':'视频', 'ql-clean':'清除字体样式' }; export function addQuillTitle(){ const oToolBar = document.querySelector('...
  • 1):单图片上传  ueditor.all.js文件中 搜索 loader.setAttribute  一共有两处 点击按钮上传 大约在24528行 和 直接 拖动图片到编辑器 大约在23770 行 添加逻辑是一样的 添加 样式   loader....
  • (1)用UIWebview加载// 自适应尺寸大小- (NSString *)autoWebAutoImageSize:(NSString *)html{ //搜索标签文本中的标签 NSString * regExpStr = @"";NSRegularExpression *regex=[NSRegularExpression ...
  • 昨天再配合后端对接接口时,后端返回的数据中包含了一个富文本的标签,我通过v-html的方式渲染到页面上的时候,发现后端对于富文本中的图片并未作出处理,大小还是原来的大小,在看了那个富文本组件的文档,结果只有...
  • wxParse解析富文本内容不多说,之前写过步骤介绍,主要是在使用过程中发现解析的富文本内容里有图片时有的可以点击放大缩小,有的点击却报错,找不到imgUrls。经过排查发现:循环解析的富文本内容正常,单次解析的则...
  • 解决方案:content_style 直接为编辑区编写css tinymce.init({ content_style: "img{width:100%}" }); 官方文档:http://tinymce.ax-z.cn/configure/content-appearance.php#content_style
  • uniapp的uParse富文本图片大小

    千次阅读 2020-06-24 11:39:54
    uniapp的uParse富文本图片大小 解决方法 <!-- #ifndef H5 --> <u-parse class="content" :content="anchorDetail.introduce" @preview="preview" /> <!-- #endif --> <!-- #ifdef H5 --> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,667
精华内容 3,066
关键字:

富文本图片太大