全国咨询热线:18720358503

济宁小程序如何做_IE11下CKEditor在Bootstrap Modal中下

类别:行业新闻 发布时间:2021-01-07 浏览人次:

IE11下CKEditor在Bootstrap Modal中下拉问题的解决       这篇文章主要介绍了IE11下CKEditor在Bootstrap Modal中下拉问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

最近在项目中需要在Bootstrap Modal弹出框中载入CKEditor。

初始化CKEditor以后,在IE11下,格式/字体/颜色的下拉会闪现一下后就消失,但在chrome和firefox下没问题。

主要原因是IE11下,点击CKEditor,触发了focusin.modal事件,原modal enforceFocus函数的if条件成立,bootstrap modal获取焦点,CKEditor下拉失去焦点,所以下拉出现闪现。

Google了以后找到了一个

这个解决方案中,加了判断后,可以避免modal获取焦点,但好像modal一直都不会trigger了。

我做了一下修改,以下代码是在原modal enforceFocus函数的基础上添加了!$(e.target.parentNode).closest(".cke").length判断条件,也就是说在原判断条件+未点击在CKEditor上,则modal获取焦点。

代码的执行顺序是jQuery、bootstrap再执行此段代码。

$.fn.modal.Constructor.prototype.enforceFocus = function() {
 $(document)
 .off('focusin.bs.modal')
 .on('focusin.bs.modal', $.proxy(function (e) {
 if (document !== e.target 
 this.$element[0] !== e.target 
 !this.$element.has(e.target).length 
 !$(e.target.parentNode).closest(".cke").length) {
 this.$element.trigger('focus')
 }, this))
};

在项目中测试了一下未发现问题。 

附 bootstrap.js中enforceFocus函数代码对比

Modal.prototype.enforceFocus = function () {
 $(document)
 .off('focusin.bs.modal') // guard against infinite focus loop
 .on('focusin.bs.modal', $.proxy(function (e) {
 if (document !== e.target 
 this.$element[0] !== e.target 
 !this.$element.has(e.target).length) {
 this.$element.trigger('focus')
 }, this))
 }

this.$element表示modal对象。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


推荐阅读

济宁小程序如何做_IE11下CKEditor在Bootstrap Modal中下

IE11下CKEditor在Bootstrap Modal中往下拉难题的处理 本文关键详细介绍了IE11下CKEditor在Bootstrap Modal中往下拉难题的处理方式,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照...

2021-01-07
网站优化网站建设对网站的好处有哪些

当一家企业基本建设了一个官方网站以后,期待自身的网站可以在互联网营销推广行业之中产生大量销售业绩。因而,就必须开展技术专业的企业网站建设和营销推广,在互连在网上产...

2021-01-07
20多个出色的蓝色系网站设计

Color wheel pro说:深蓝色是天上和深海的颜色。它经常和深层和平稳相关。它代表着信赖、忠实、智谋、自信心、聪慧、信念、真知与人间天堂。深蓝色被觉得有益于人的心身。它缓解身...

2021-01-07
广州凡科互联网科技股份有限公司招聘英文助理

招聘人数:10职位信息1、负责AIS专家智库的管理与建设工作; 2、发现并整理行业优秀的技术和管理专家加入智库,并按要求进行分类管理、建立专家档案,深度发掘专家的研究领域与研...

2021-01-07
微信点餐小程序教程-常桉网络组团赴外地学习交

您的部位: > 网站站长必看 > 企业新闻报道 > 常桉互联网组队赴异地学习培训沟通交流常桉互联网组队赴异地学习培训沟通交流 2016 年 07 月 05 日,为提高企业的整体实力,推动企业全...

2021-01-07
广州凡科互联网科技股份有限公司招聘天猫运营

招聘人数:27职位信息岗位职责:1、负责全面管理品牌的线上渠道运营,对销售结果负责;2、制定与分解年度目标及营销策略,包含日常运营与活动运营;3、根据战略发展需求,配置合...

2021-01-07
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信