今早在整理文件上传模块的时候,发现富文本编辑器 kindeditor 上传图片的对话框无法显示,其实对话框已经生成了,但是它没有top值,所以在页面上看不见。

捣鼓了一个多小时,代码看了一大串,没解决!百度了一下,发现下面这篇文章,完全正解!

转载自 https://blog.csdn.net/kinginblue/article/details/45398267

问题:使用KindEditor上传图片,当浏览器缩小或者放大的时候,上传对话框会不见了。

原因是当浏览器放大缩小时,窗口的 innerHeight 和 innerWidth 成倍变化。
但是动态加载的对话框的位置的top和left值还是缩放100%状态下的值。
所以解决思路是:当对话框加载完之后,使用 JS+CSS 控制该对话框的位置。
 
查看KindEditor图片上传对话框 的结构是:
<div class="class="ke-dialog-default ke-dialog">
<div class="ke-dialog-content"></div>
<div class="ke-dialog-shadow"></div>
</div>
 
查看KindEditor官方文档:
 
这里要注意,一定要在回调函数体里获取和设置对话框位置。
因为是异步加载,其他位置获取或设置可能获取不到该对话框Dom
 
//获取浏览器窗口内外高度
<pre name="code" class="javascript">var inHeight = window.innerHeight;
var inWidth = window.innerWidth;
var outHeight = window.outerHeight;
var outWidth = window.outerWidth;
 
 
顺便学习一下JS(JQuery)获取和设置元素位置的操作
 //纯JS
document.getElementById("child").style.left="800px";
document.getElementById("child").style.top="200px"; //offset()获取当前元素基于浏览的位置
var offsettop=$("#unamespan").offset().top;
var offsetleft=$("#unamespan").offset().left; //position()获取当前元素基于父容器的位置
var positiontop=$("#unamespan").position().top;
var positionleft=$("#unamespan").position().left; //设置panel2的位置基于unamespan的坐标
$("#panel2").css({position: "absolute",'top':offsettop+100,'left':offsetleft+50,'z-index':2});

【转载】解决KindEditor图片上传对话框位置异常问题(浏览器放大缩小时对话框不见了)的更多相关文章

  1. kindeditor图片上传 struts2实现

    一.kindeditor以及struts2部署搭建不再赘述,如需要请参考kindeditor使用方法 Struts2框架搭建 二.kindeditor图片上传所依赖jar包在kindeditor\js ...

  2. KindEditor图片上传到七牛云

    自己做了一个网站,编辑器用的是KindEditor,平时会涉及到KindEditor自带的图片上传,但是服务器用的是虚拟主机,没多少空间,就一直想着把图片放在免费的云存储空间,之前看KindEdito ...

  3. MVC 中使用kindEditor 图片上传在IE 上进行上传出现的问题

    在IE 上使用KindEditor 进行单张图片上传的时候会出现一个下载安全警告,这样将会造成图片上传失败,出现的错误页面:

  4. kindeditor 图片上传插件

    富文本编辑器,kindeditor是比较好用的一款.需要的功能都有,文档.demo也详细.有什么功能去官网看一眼就好. 官网:http://kindeditor.net/ 一些好用的如图片上传,kin ...

  5. Kindeditor图片上传Controller

    asp.net MVC Kindeditor 图片.文件上传所用的Controller [HttpPost, AllowAnonymous] public ActionResult UploadIma ...

  6. struts中用kindeditor实现的图片上传并且显示在页面上

    做公司网站的时候由于需要在内容属性中加入图片,所以就有了这个问题,本来一开始找几篇文章看都是讲修改kindeditor/jsp/file_manager_json.jsp和upload_json.js ...

  7. asp.net core 如何集成kindeditor并实现图片上传功能

     准备工作 1.visual studio 2015 update3开发环境 2.net core 1.0.1 及以上版本  目录 新建asp.net core web项目 下载kindeditor ...

  8. MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件

    场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...

  9. Django配置图片上传

    本文首先实现django中上传图片的过程,然后解决富文本编辑器文件上传的问题. 一. 上传图片 1.在 settings.py 中配置MEDIA_URL  和 MEDIA_ROOT 在 D:\blog ...

随机推荐

  1. Python第三方包的egg info 是什么东西

    xxx.egg-info 一般与 xxx文件夹同时存在,一起来表示完整模块.

  2. Python--day19--os模块

    os模块 os模块是与操作系统交互的一个接口 os.makedirs('dirname1/dirname2') 可生成多层递归目录 os.removedirs('dirname1') 若目录为空,则删 ...

  3. HDU 2844 混合背包、

    题意:一个人想买手表,给你n个价值的硬币,然后给你n个价值硬币对应的个数.但是呢,这个人只知道这个手表的价格不超过m元.问他最多能买多少种价值的手表 思路:dp背包专题 但是- - 一直不知道该怎么d ...

  4. uni-app学习记录07-生命周期

    <template> <view class="content"> 我是首页 </view> </template> <scr ...

  5. java面向接口编程之制定标准和简单工厂模式

    制定一个标准,让别人去实现或者说满足它! Eg: interface USB{//定义USB标准 void useUSB();//USB有使用USB的行为 } 简单工厂模式 构建一个工厂出来,在里面进 ...

  6. laravel怎么开启调试模式

      在.env文件里有个APP_DEBUG=true,如果是false,改成true就好了.

  7. dijkstra堆优化(multiset实现->大大减小代码量)

    例题: Time Limit: 1 second Memory Limit: 128 MB [问题描述] 在电视时代,没有多少人观看戏剧表演.Malidinesia古董喜剧演员意识到这一事实,他们想宣 ...

  8. 2018-10-23-WPF-使用-Pandoc-把-Markdown-转-Docx

    title author date CreateTime categories WPF 使用 Pandoc 把 Markdown 转 Docx lindexi 2018-10-23 11:35:47 ...

  9. map实现删除给定字符串中的小写字母

    def del_lowerletters(s): if s>='a' and s<='z': return " " else: return s print(" ...

  10. Perl中神奇的@EXPORT

    @EXPORT Perl通过继承,可以使子类可以像使用本地方法一样使用其基类的方法. 一个类如果想把自己的方法(变量)暴露给别人使用(比如一些公共基础类的的通用方法或变量),还可将直接将方法(变量)添 ...