kineditor编辑器Dialog弹窗偶尔不显示终极解决方案

KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

我们开发的web项目,从2010年开始,一直使用KindEditor 作为默认编辑器,在移动端尚未盛行的那个年代,绝对是首选。后来,笔记本、PAD端、手机端浏览并编辑web页面的需求越来越频繁,web响应式以及自适应渐渐成为了web网页主流标配。页面设计、前端框架、功能开发都在与时俱进,唯独后端的KindEditor编辑器一直舍不得替换,不单是因为简单好用,还可能也想将那些初入社会为梦想拼搏奋斗的日子记忆留存在代码行间。

无奈,KindEditor偶发性的bug被越来越多的老客户吐槽反馈,具体表现为上传图片或上传文件的Dialog弹窗有时候不显示,但有时清除浏览器缓存后又是正常的。这不,又有客户来反馈bug了,客户测试了三台电脑,两台笔记本,一台台式机,唯一正常的就是那么台式机。

弹窗正常

弹窗异常

痛定思痛,我们也决定彻底修复这个bug。既然电脑端正常,笔记本端不正常,大概是样式定位问题,打开Chrome,操起F12大法,比较一下二者~

正常弹窗下的样式定位

非正常弹窗下的样式定位

所以问题出在哪里,看出来了吗?非正常弹窗下的样式定位丢失了top,这个才是导致dialog弹窗不显示的根本原因。

解决方法,增加下面两句代码即可:

x = parseInt(x);
y = parseInt(y);

位置大概在3523行,替换如下:

autoPos : function(width, height) {
    var self = this,
        w = _removeUnit(width) || 0,
        h = _removeUnit(height) || 0,
        scrollPos = _getScrollPos();
    if (self._alignEl) {
        var knode = K(self._alignEl),
            pos = knode.pos(),
            diffX = _round(knode[0].clientWidth / 2 - w / 2),
            diffY = _round(knode[0].clientHeight / 2 - h / 2);
        x = diffX < 0 ? pos.x : pos.x + diffX;
        y = diffY < 0 ? pos.y : pos.y + diffY;
    } else {
        var docEl = _docElement(self.doc);
        x = _round(scrollPos.x + (docEl.clientWidth - w) / 2);
        y = _round(scrollPos.y + (docEl.clientHeight - h) / 2);
    }
    if (!(_IE && _V < 7 || _QUIRKS)) {
        x -= scrollPos.x;
        y -= scrollPos.y;
    }
    x = parseInt(x);
    y = parseInt(y);
    return self.pos(x, y);
},

 

————————————————
参考文章:
http://kindeditor.net/index.php
https://www.cnblogs.com/lishouxiangjs/p/16226141.html

本文链接:https://www.moyan.net.cn/study/1574.html
本文标题:kineditor编辑器Dialog弹窗偶尔不显示终极解决方案
本文声明:如无特殊说明,您可以自由转载本文,但需标注转载自莫言斋(https://www.moyan.net.cn/)。本站部分文章信息来源于互联网及公开渠道,如侵犯到您的权益,请及时联系我们(94372#qq.com)处理!
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇