twitter-bootstrap 如何在 Bootstrap Modal 中使用 CKEditor？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22637455/
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
How to use CKEditor in a Bootstrap Modal?
提问by Max
If I use the CKEditorplugin in an HTML page based on a Bootstrap template, it works great, however if I insert the editor on a Bootstrap Modal like this
如果我在基于 Bootstrap 模板的 HTML 页面中使用CKEditor插件，效果很好，但是如果我将编辑器插入这样的 Bootstrap Modal
<!-- Modal -->
<div class="modal fade" id="modalAddBrand" tabindex="-1" role="dialog" aria labelledby="modalAddBrandLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="modalAddBrandLabel">Add brand</h4>
</div>
<div class="modal-body">
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea> <script>
CKEDITOR.replace('editor1');
</script>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="AddBrandButton" type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
The editor works, but all the form controls on the popup windows of the editor are disabled, if you try to add a link or an image, for example, you cannot insert the URL or any description because the inputs are disabled.
编辑器可以工作，但编辑器弹出窗口上的所有表单控件都被禁用，例如，如果您尝试添加链接或图像，则无法插入 URL 或任何描述，因为输入被禁用。
Any workaround for this issue?
此问题的任何解决方法？
This is a fiddle example: http://jsfiddle.net/7zDay/
这是一个小提琴示例：http: //jsfiddle.net/7zDay/
回答by Pavel Kovalev
This should help http://jsfiddle.net/pvkovalev/4PACy/
这应该有助于http://jsfiddle.net/pvkovalev/4PACy/
$.fn.modal.Constructor.prototype.enforceFocus = function () {
var $modalElement = this.$element;
$(document).on('focusin.modal', function (e) {
var $parent = $(e.target.parentNode);
if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length
// add whatever conditions you need here:
&&
!$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) {
$modalElement.focus()
}
})
};
Update October 2016:
2016 年 10 月更新：
CDN link for CKEditor has been changed, so I updated jsfiddle
CKEditor 的 CDN 链接已更改，因此我更新了 jsfiddle
回答by Hossein Shahsahebi
This is late to answer but doing css trick will solve the issue.
回答晚了，但做 css 技巧将解决问题。
Default z-indexof Bootstrap modal is 10051and default z-indexof ckeditor dialog are 10010. The trick is just to increase ckeditor dialog z-index as below. put below code in your css file:
默认的z-index引导模式是10051和默认z-indexCKEditor的对话都是10010。诀窍只是增加ckeditor对话框z-index，如下所示。将以下代码放入您的 css 文件中：
.cke_dialog
{
z-index: 10055 !important;
}
回答by peterb
See the response from aaronsnow to this thread on the ckeditor forum: http://ckeditor.com/forums/Support/Issue-with-Twitter-Bootstrap
在 ckeditor 论坛上查看 aaronsnow 对此线程的回复：http://ckeditor.com/forums/Support/Issue-with-Twitter-Bootstrap
He's given the code. Just put the code in js file and make sure you include the file after the jquery and bootstrap
他给了密码。只需将代码放在 js 文件中，并确保在 jquery 和 bootstrap 之后包含该文件
回答by Chandra Kumar
Use the 100% working script..
使用 100% 工作脚本..
<script type="text/javascript">
// Include this file AFTER both jQuery and bootstrap 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_textarea')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
modal_this.$element.focus()
}
})
};
</script>
Thanks!
谢谢！
回答by BilgiSoft
$(document).on({'show.bs.modal': function () {
$(this).removeAttr('tabindex');
} }, '.modal');
回答by Mohd Abdul Mujib
I was getting Uncaught TypeError: Cannot read property 'fn' of undefined
我得到 Uncaught TypeError: Cannot read property 'fn' of undefined
So I just replaced the $inside the script provided by @Pavel Kovalevabove to jQuery.
所以我只是将上面$提供的脚本内部替换@Pavel Kovalev为jQuery.
jQuery.fn.modal.Constructor.prototype.enforceFocus = function () {
modal_this = this
jQuery(document).on('focusin.modal', function (e) {
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& !jQuery(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
&& !jQuery(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
modal_this.$element.focus()
}
})
};
回答by Chic Theme
Just open /core/config.jsin ckeditor files than change "baseFloatZIndex" variable
只需在 ckeditor 文件中打开/core/config.js而不是更改“ baseFloatZIndex”变量
baseFloatZIndex = 10000
to
到
baseFloatZIndex = 20000
It will change the start "z-index" of your editor box and the popups.
它将更改编辑器框和弹出窗口的起始“ z-index” 。
回答by ThePueblo
I think i found some solution for this.
我想我找到了一些解决方案。
As @Pavel Kovalev suggested it have something to do with boostraps 4 JS and focus in modal script. I had just same problem as Yours.
正如@Pavel Kovalev 所暗示的那样，它与 boostraps 4 JS 和专注于模态脚本有关。我和你的问题一样。
There is an option for modals called "focus" which sets focus on initialized modals. Disabling this option makes all Your inputs in CKEditors modals work as they should. Not having focus on this modal i can live without :)
模态有一个称为“焦点”的选项，它将焦点设置在初始化的模态上。禁用此选项会使您在 CKEditors 模态中的所有输入都能正常工作。没有专注于这种模式，我可以没有:)
See details here: https://getbootstrap.com/docs/4.3/components/modal/#options
在此处查看详细信息：https: //getbootstrap.com/docs/4.3/components/modal/#options
In my approach to this i finaly got something like this:
在我的方法中，我最终得到了这样的东西：
<div class="modal fade" data-focus="false" id="newsAdd" role="dialog" aria-labelledby="fieldAdd" aria-hidden="true">
...
</div>
Also it is propably good idea for some more extensive testing, especialy if You have multiple bootstrap modals with CKEditor on one page.
此外，对于一些更广泛的测试来说，这可能是个好主意，特别是如果您在一页上有多个带有 CKEditor 的引导模式。
As for the all the "fixes" You can propably find on web. Have a look that they most likely refer to bootstrap 3 where events on modal are different so they simply cannot work. Including @Pavel Kovalev solution.
至于所有的“修复”，你可以在网上找到。看看他们最有可能指的是引导程序 3，其中模态上的事件不同，因此它们根本无法工作。包括@Pavel Kovalev 解决方案。
回答by fingers10
This worked for me with bootstrap 4.4and ckeditor 4.14. All you need to do is to initialize the ckeditor in your modal's shown.bs.modalevent.
这对我有用bootstrap 4.4和ckeditor 4.14。您需要做的就是在您的模态shown.bs.modal事件中初始化 ckeditor 。
$('#yourModal')
.on('shown.bs.modal', (e) => {
CKEDITOR.replace('editor')
});
worked like a charm.
像魅力一样工作。
回答by t4taurus
I just remove the tabindex="-1" from the dialog main div element. Here is the sample code
我只是从对话框主 div 元素中删除 tabindex="-1" 。这是示例代码
<div class="modal fade" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
I just remove this
我只是删除这个
tabindex="-1"
and it starts working.
它开始工作。
