ueditor 上传的图片在内容里显示的尺寸过大的问题

没改动之前是上面这样的,图片显示不开,撑出了滚动条,想让他自适应100%,不出现滚动条

网上有方法

1.ueditor 的 themes 文件夹下有个iframe.css 加入以下代码,保存(原先的css文件应该是空的,只有一行注释)/// 个人感觉没用,调试了一下确实没用不知为什么,放在这了

img {  
 max-width: 100%; /*图片自适应宽度*/  
}  
body {  
 overflow-y: scroll !important;  
}  
.view {  
 word-break: break-all;  
}  
.vote_area {  
 display: block;  
}  
.vote_iframe {  
 background-color: transparent;  
 border: 0 none;  
 height: 100%;  
}  
#edui1_imagescale{display:none !important;} 

前台引入css

<script type="text/javascript">
  var ue = UE.getEditor(‘container‘, {
    toolbars: [
      [‘fullscreen‘,‘source‘,‘undo‘,‘redo‘,‘indent‘,‘bold‘,‘italic‘,‘underline‘,‘fontborder‘,‘snapscreen‘,‘print‘,‘preview‘,‘link‘,‘unlink‘,‘insertrow‘,‘insertcol‘,‘mergeright‘,‘mergedown‘,‘deleterow‘,‘deletecol‘,‘splittorows‘,‘splittocols‘,‘splittocells‘,‘fontfamily‘,‘fontsize‘,‘simpleupload‘,‘insertimage‘,‘spechars‘,‘searchreplace‘,‘justifyleft‘,‘justifyright‘,‘justifycenter‘],
      [‘justifyjustify‘,‘forecolor‘,‘backcolor‘,‘attachment‘,‘imagecenter‘,‘wordimage‘,‘inserttable‘,‘strikethrough‘, ‘superscript‘, ‘subscript‘, ‘removeformat‘, ‘formatmatch‘, ‘autotypeset‘, ‘blockquote‘, ‘pasteplain‘, ‘|‘, ‘forecolor‘, ‘backcolor‘, ‘insertorderedlist‘, ‘insertunorderedlist‘, ‘selectall‘, ‘cleardoc‘]
    ],
    iframeCssUrl: ‘__PUBLIC__/other/ueditor/themes/iframe.css‘,// 引入css
    autoHeightEnabled: true,
    autoFloatEnabled: true
  });
</script>

2.ueditor.all.js 找到render:function(container){}修改如下:、// 亲测好用

var html = ( ie && browser.version < 9  ? ‘‘ : ‘<!DOCTYPE html>‘) +
                    ‘<html xmlns=\‘http://www.w3.org/1999/xhtml\‘ class=\‘view\‘ ><head>‘ +
                    ‘<style type=\‘text/css\‘>‘ +
                    //设置四周的留边
                    ‘.view{padding:0;word-wrap:break-word;cursor:text;height:90%;}\n‘ +
                    //设置默认字体和字号
                    //font-family不能呢随便改,在safari下fillchar会有解析问题
                    ‘body{margin:8px;font-family:sans-serif;font-size:16px;}‘ +
                    //设置图片最大宽度,以免撑出滚动条
                ‘img{max-width:100%;}‘+
                    //设置段落间距
                    ‘p{margin:5px 0;}</style>‘ +
                    ( options.iframeCssUrl ? ‘<link rel=\‘stylesheet\‘ type=\‘text/css\‘ href=\‘‘ + utils.unhtml(options.iframeCssUrl) + ‘\‘/>‘ : ‘‘ ) +
                    (options.initialStyle ? ‘<style>‘ + options.initialStyle + ‘</style>‘ : ‘‘) +
                    ‘</head><body class=\‘view\‘ ></body>‘ +
                    ‘<script type=\‘text/javascript\‘ ‘ + (ie ? ‘defer=\‘defer\‘‘ : ‘‘ ) +‘ id=\‘_initialScript\‘>‘ +
                    ‘setTimeout(function(){editor = window.parent.UE.instants[\‘ueditorInstant‘ + me.uid + ‘\‘];editor._setup(document);},0);‘ +
                    ‘var _tmpScript = document.getElementById(\‘_initialScript\‘);_tmpScript.parentNode.removeChild(_tmpScript);</script></html>‘;

其实就加了一句

经实验,还是第二种好用

原文地址:https://www.cnblogs.com/jianxian/p/8764035.html

时间: 2024-10-12 03:11:51

ueditor 上传的图片在内容里显示的尺寸过大的问题的相关文章

magento 1.9 上传后图片前后台无法正常显示

1.上传后图片不显示,设置 允许 flash 2.保证php 执行是内存大小至少为为128M,多种方式设置,这里以init_set为例子,在index.php 加入下面一行代码,根据情况而定 ini_set('memory_limit','128M'); 原文地址:https://www.cnblogs.com/pa200318/p/10241850.html

thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印

今天分享一下thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印.博主是新手,在这里卡住了很久(>_<) thinkphp 3.2.3整合ueditor 1.4 下载地址:https://github.com/Nintendov/Ueditor-thinkphp 下载下来,看着配置就可以了. 下面就是给上传图片加水印: (在做这步前,请确保ueditor已经正常工作) 我的工程目录如下: fonts里面的fz.fft为水印字体 images里面的logo.png为水印图片

百度编辑器ueditor给上传的图片添加水印

百度编辑器本身是没有为上传图片添加水印的功能,想要在上传的时候添加图片水印,也很简单.以 ueditor 1.2.6 为例,打开php目录下面的imageUp.php文件,查找"$info = $up->getFileInfo();",在这句代码的下面加入以下代码: /* 添加水印 start */ $water_img = "watermark.png"; //水印文件(替这里换成你要的水印) $img_min_w = 350; //添加水印需要图片最小达到

基于spring-boot的web应用,ckeditor上传文件图片文件

说来惭愧,这个应用调试,折腾了我一整天,google了很多帖子,才算整明白,今天在这里做个记录和分享吧,也作为自己后续的参考! 第一步,ckeditor(本博文论及的ckeditor版本4.5.6)的配置图片文件上传功能,默认这个是没有开启的,就不用多说,ckeditor官网上也说的很清楚!http://docs.ckeditor.com 下面简单的说下配置(配置文件algoConfig.js): 1 CKEDITOR.editorConfig = function( config ) { 2

? 为什么上传文件的表单里要加个属性enctype----摘录

上传文件的表单中<form>要加属性enctype="multipart/form-data",很多人只是死记硬背知道上传表单要这么写,知其然而不知其所以然.那到底为什么要添加这个属性呢?它是什么意思呢?它又有什么其他可选值呢? 其实form表单在你不写enctype属性时,也默认为其添加了enctype属性值,默认值是enctype="application/x-www-form-urlencoded".这个属性管理的是表单的MIME编码,共有三个值可

解决PHP在Windows IIS 上传的图片无法访问的问题

最近在做一个网站项目遇到了一个很奇怪的问题,现记录下来希望可以帮助到其他的朋友 问题描述: 最近公司刚刚在香港购买了一个Windows Server 2008 服务器用于将一个客户的N个php网站进行统一管理 该服务器上有三个网站,一个是THINKPHP开发的小型电子竞技网站,一个使用WORDPRESS开发的企业网站,一个使用ECSHOP开发的商城商城 由于前二天家中有事所以请假回去了一个礼拜(走之前三个网站都已经部署到该服务器但测试是在其他服务器上进行的并没有发现什么问题) 在请假回来后客户反

KindEditor3.x-自动上传Word图片功能.

Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法处理多张图片.而且转换成BASE64后是作为内容一起提交给服务器,不能够将图片单独保存在另外一台服务器中.如果需要单独保存则需要自已进行处理.比较麻烦. 我希望打开Word或者WPS文档后,复制内容然后直接粘贴到富文本编辑器中,编辑器自动将图片批量上传到服务器中,无论文档中有多少张图片,编辑器都全部

Django(十九)文件上传:图片上传(后台上传、自定义上传)、

一.基本设置 参考:https://docs.djangoproject.com/zh-hans/3.0/topics/http/file-uploads/ 1)配置project1/settings.py 因为图片也属于静态文件,所以保存到static目录下. MEDIA_ROOT=os.path.join(BASE_DIR,"static/media") 2)在static目录下创建media目录,再创建应用名称的目录,此例为app1 F:\Test\django-demo\pro

KindEditor上传本地图片在ASP.NET MVC的配置

http://www.cnblogs.com/upupto/archive/2010/08/24/1807202.html 本文解决KindEditor上传本地图片在ASP.NET MVC中的配置. 开发工具:VS 2010 EN 开发语言:Visual C# ASP.NET MVC 2.0 kindeditor-3.5-zh_CN 下载 文中以Blog文章为例,为做演示,数据表比较简单,如下图: 添加 BlogController Code: 1 2 3 4 5 6 7 8 9 10 11 1