今早在整理文件上传模块的时候,发现富文本编辑器 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. 第25章 Pytorch 如何高效使用GPU

    第25章 Pytorch 如何高效使用GPU 深度学习涉及很多向量或多矩阵运算,如矩阵相乘.矩阵相加.矩阵-向量乘法等.深层模型的算法,如BP,Auto-Encoder,CNN等,都可以写成矩阵运算的 ...

  2. 洛谷P1280 尼克的任务 题解 动态规划/最短路

    作者:zifeiy 标签:动态规划.最短路 题目链接:https://www.luogu.org/problem/P1280 题目大意: 有k个任务分布在第1至n这n个时间点,第i个任务的于第 \(P ...

  3. php_sphinx安装使用

    Sphinx的简介: Sphinx是一个独立的全文索引引擎,意图为其他应用提供高速.低空间 占用.搜索结果高相关度的全文搜索功能.Sphinx可以非常容易的与 SQL数据库和脚本语言集成.内置MySQ ...

  4. H3C 多路径网络中环路产生过程(3)

  5. 【9103】求n的累加和

    Time Limit: 10 second Memory Limit: 2 MB 问题描述 用高精度方法,求s=1+2+3+...+n的精确值(n以一般整数输入) Input 文件输入仅一行,输入n ...

  6. SpringBoot: 浅谈文件上传和访问的坑 (MultiPartFile)

    本次的项目环境为 SpringBoot 2.0.4, JDK8.0. 服务器环境为CentOS7.0, Nginx的忘了版本. 前言 SpringBoot使用MultiPartFile接收来自表单的f ...

  7. POJ 1797 Heavy Transportation(Dijkstra运用)

    Description Background Hugo Heavy is happy. After the breakdown of the Cargolifter project he can no ...

  8. Linux 内核中的数据类型

    在我们进入更高级主题之前, 我们需要停下来快速关注一下可移植性问题. 现代版本的 Linux 内核是 高度可移植的, 它正运行在很多不同体系上. 由于 Linux 内核的多平台特性, 打算做认真使用的 ...

  9. vue-learning:37 - router - 目录

    vue路由vue-router 目录 前端路由历史 服务端渲染(SSR:server side render) 客户端路由(client side routing) 前端路由实现原理 hash模式: ...

  10. ES6/ES7/ES8新特性

    ES6 变量的改变 let const 2. 字符串新增方法 let str = 'react'; str.includes('re') // true str.repeat(3) // reactr ...