twitter-bootstrap 使用 CKEditor 引导程序等于问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14420300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap with CKEditor equals problems
提问by Miguel P
I'm trying to create a Bootstrap modal which contains an instance of CKEditor, but there are a lot of problems...
我正在尝试创建一个包含 CKEditor 实例的 Bootstrap 模式，但是有很多问题......
So basically the fields are left unenabled, they don't look like, but I can't interact with them. Does anybody have a solution to this strange behavior?
所以基本上这些字段都未启用，它们看起来不像，但我无法与它们交互。有人对这种奇怪的行为有解决方案吗？
回答by Aaron
FWIW, I couldn't get Peter's solutionto work, but the following worked for me, and still keeps the hack in a separate file so you don't have to edit any Bootstrap source files:
FWIW，我无法让Peter 的解决方案起作用，但以下对我有用，并且仍然将 hack 保存在单独的文件中，因此您不必编辑任何 Bootstrap 源文件：
// bootstrap-ckeditor-modal-fix.js
// hack to fix ckeditor/bootstrap compatiability bug when ckeditor appears in a bootstrap modal dialog
//
// Include this AFTER both bootstrap and ckeditor are loaded.
$.fn.modal.Constructor.prototype.enforceFocus = function() {
modal_this = this
$(document).on('focusin.modal', function (e) {
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
modal_this.$element.focus()
}
})
};
回答by Andrew Kapunin
I just removed the tabindexattribute from the modal container, that seems to fix this issue for me.
我刚刚tabindex从模态容器中删除了该属性，这似乎为我解决了这个问题。
This was suggested by fathere: https://github.com/twbs/bootstrap/issues/6996
这是胖子在这里建议的：https: //github.com/twbs/bootstrap/issues/6996
回答by Peter J. Hart
Instead of messing with the Bootstrap source, I re-attached the focus event handler.
我没有弄乱 Bootstrap 源代码，而是重新附加了焦点事件处理程序。
I looked in the Bootstrap Modal (unminified) code to find where the event handler is being defined, under Modal.enforceFocus():
我查看了 Bootstrap Modal（未缩小）代码，以找到在 Modal.enforceFocus() 下定义事件处理程序的位置：
var that = this
$(document).on('focusin.modal', function (e) {
if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
that.$element.focus()
}
})
I then added a method to CKEditor that ammended this function. You can put this wherever; maybe in a file just for CKEditor overrides.
然后我向 CKEditor 添加了一个方法来修正这个功能。你可以把它放在任何地方；也许在一个仅用于 CKEditor 覆盖的文件中。
CKEDITOR.bootstrapModalFix = function (modal, $) {
modal.on('shown', function () {
var that = $(this).data('modal');
$(document)
.off('focusin.modal')
.on('focusin.modal', function (e) {
// Add this line
if( e.target.className && e.target.className.indexOf('cke_') == 0 ) return;
// Original
if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
that.$element.focus()
}
});
});
};
So now, if I know I am going to load a CKEditor in a Bootstrap modal, I call this method, assuming jQuery is $:
所以现在，如果我知道我将在 Bootstrap 模式中加载一个 CKEditor，我会调用这个方法，假设 jQuery 是$：
CKEDITOR.bootstrapModalFix( $('#myModal'), $ )
回答by maestro
If all the above solutions will not work for you, Please try this:
如果以上所有解决方案都不适合您，请尝试以下操作：
$('#myModal').on('shown.bs.modal', function() {
$(document).off('focusin.modal');
});
It worked for me instantly. Here is the source: tobiv's answer - github
它立即对我有用。这是来源：tobiv 的回答 - github
回答by Cezar T
The z-index of the bootstrap modal is higher than that of ckeditor panels. So an alternative solution I found was to increase the z-index for ckeditor. Add the following line to ckeditor config.js
bootstrap modal 的 z-index 高于 ckeditor 面板的 z-index。所以我发现的一个替代解决方案是增加 ckeditor 的 z-index。将以下行添加到 ckeditor config.js
// app/assets/javascripts/ckeditor/config.js
config.baseFloatZIndex = 1E5;
回答by Tom Yeldham
Hey I was having these problems. I found this ticket https://github.com/twitter/bootstrap/issues/6996which seems to have fixed the issue of the inputs being unselectable for me. I extended the change in this ticket to:
嘿，我遇到了这些问题。我发现这张票https://github.com/twitter/bootstrap/issues/6996似乎已经解决了我无法选择输入的问题。我将此票中的更改扩展到：
if (that.$element[0] !== e.target && !that.$element.has(e.target).length && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')){
This allows the selects to be usuable as well as the inputs, although repeating the selector is a bit janky it does fix the bugs. Hope this helps you.
这允许选择和输入一样可用，尽管重复选择器有点笨拙，但它确实修复了错误。希望这对你有帮助。
回答by Pavel Kovalev
Working example is here: http://jsfiddle.net/pvkovalev/4PACy/
工作示例在这里：http: //jsfiddle.net/pvkovalev/4PACy/
$.fn.modal.Constructor.prototype.enforceFocus = function () {
modal_this = this
$(document).on('focusin.modal', function (e) {
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
// add whatever conditions you need here:
&&
!$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
modal_this.$element.focus()
}
})
};
回答by trf
Bootstrap changed focusin.modal to shown.bs.modal
Bootstrap 将 focusin.modal 更改为 show.bs.modal
$.fn.modal.Constructor.prototype.enforceFocus = function() {
modal_this = this
$(document).on('shown.bs.modal', function (e) {
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
modal_this.$element.focus()
}
})
};
This is working for me.
这对我有用。
