如果我在基于Bootstrap模板的HTML页面中使用CKEditor插件，它的效果很好，但是如果我在这样的Bootstrap模式上插入编辑器
<!-- 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>
编辑器工作，但编辑器弹出窗口中的所有表单控件都被禁用，例如，如果您尝试添加链接或图像，则无法插入URL或任何描述，因为输入已禁用。
此问题的解决方法是什么？
这是一个小提琴示例：http://jsfiddle.net/7zDay/
答案 0 :(得分：50)
这应该有助于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()
}
})
};
2016年10月更新：
CKEditor的CDN链接已更改，因此我更新了jsfiddle
答案 1 :(得分：3)
在ckeditor论坛上查看aaronsnow对此主题的回复： http://ckeditor.com/forums/Support/Issue-with-Twitter-Bootstrap
他给了代码。只需将代码放在js文件中，并确保在jquery和bootstrap之后包含该文件
答案 2 :(得分：3)
这回答迟到，但做css技巧将解决问题。
Bootstrap模式的默认z-index为10051，ckeditor对话框的默认z-index为10010。诀窍就是增加ckeditor对话框z-index如下所示。将下面的代码放在你的css文件中：
.cke_dialog
{
z-index: 10055 !important;
}
答案 3 :(得分：1)
使用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>
谢谢！
答案 4 :(得分：1)
$(document).on({'show.bs.modal': function () {
$(this).removeAttr('tabindex');
} }, '.modal');
答案 5 :(得分：0)
我得到了Uncaught TypeError: Cannot read property 'fn' of undefined
所以我只是将上面$提供的脚本中的@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()
}
})
};
答案 6 :(得分：0)
不知道，也许在我的版本中它已经修复，但我的解决方案是：
$("#messageModal").on('shown.bs.modal', function() {
CKEDITOR.replace('message', {
height: '400px',
width: '100%'
});
})
答案 7 :(得分：0)
一切都非常简单：
$('#modal').removeAttr('tabindex');
$('#modal').focusout(function(){
$(this).css({'position':'relative'});
});
$('#modal').focusin(function(){
$(this).css({'position':'fixed'});
});
答案 8 :(得分：0)
这非常简短。从他们应用程序中存储的路径导入CKEditor Javascript配置文件。这是我的
<script type="text/javascript" src="{% static 'ckeditor/ckeditor-init.js' %}"></script>
<script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
在此之后，您可以通过执行此操作来调用CKEditor来替换您的textarea
CKEDITOR.replace('topic', {
uiColor: '#9AB8F3',
language: "en-us",
toolbar: "Custom",
height: "200",
width: "400",
skin: "moono",
toolbar_Custom: [
["Bold", "Italic", "Underline"],
["NumberedList", "BulletedList", "-", "Outdent", "Indent", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"],
["Link", "Unlink"]
],
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdn.ckeditor.com/4.3.4/standard/ckeditor.js"></script>
<!-- Modal -->
<div class="modal fade" id="modalAddBrand" tabindex="-1" role="dialog">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="modal-content">
<div class="user-box">
<h2>Create a new discussion</h2>
<form method="post" id="discussion_add" action="#">
<!--FORM FIELD START-->
<div class="form">
<div class="input-container">
<input type="text" id="id_session" name="session" required="true">
</div>
<div class="input-container">
<textarea cols="40" id="id_topic" name="topic" rows="10"></textarea>
</div>
<div class="input-container">
<button class="btn-style">Create Discussion</button>
</div>
</div>
</form>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<button data-toggle="modal" data-target="#modalAddBrand">Launch Modal</button>
答案 9 :(得分：0)
只需在ckeditor文件中打开 /core/config.js ，然后更改“ baseFloatZIndex ”变量
baseFloatZIndex = 10000
到
baseFloatZIndex = 20000
它将更改编辑器框的开始“ z-index ”和弹出窗口。
答案 10 :(得分：0)
我想我为此找到了一些解决方案。
正如@Pavel Kovalev所建议的，它与boostraps 4 JS有关，并专注于模式脚本。我和你有同样的问题。
模态有一个名为“ focus”的选项，它可以将焦点放在初始化的模态上。禁用此选项可使CKEditors模式中的所有输入正常工作。不专注于这种模式，我可以没有：）
在此处查看详细信息： https://getbootstrap.com/docs/4.3/components/modal/#options
在我处理这个问题的过程中，我最终得到了这样的东西：
<div class="modal fade" data-focus="false" id="newsAdd" role="dialog" aria-labelledby="fieldAdd" aria-hidden="true">
...
</div>
对于一些更广泛的测试，尤其是如果您在一页上使用CKEditor拥有多个引导程序模版，这也是一个好主意。
关于所有“修补程序”，您都可以在网上找到。看一看，他们很可能是指引导程序3，其中模态上的事件是不同的，因此它们根本无法工作。包括@Pavel Kovalev解决方案。
答案 11 :(得分：0)
这对我来说bootstrap 4.4和ckeditor 4.14有用。您需要做的就是在模式的shown.bs.modal事件中初始化ckeditor。
$('#yourModal')
.on('shown.bs.modal', (e) => {
CKEDITOR.replace('editor')
});
像魅力一样工作。
答案 12 :(得分：0)
我只是从对话框的主要div元素中删除了tabindex =“-1”。这是示例代码
<div class="modal fade" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
我只是删除了这个
tabindex="-1"
它开始工作。
答案 13 :(得分：0)
对于Bootstrap 4，此行将不再起作用。他们将需要弄清楚它已更改为：
$.fn.modal.Constructor.prototype._enforceFocus = function() {};
代替
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
因此，代码应如下所示：
$.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()
}
})
};
答案 14 :(得分：0)
添加此 css 以设置链接到对话框容器的 .cke_dialog_container z-index
.cke_dialog_container
{
z-index: 20000
}
对于模态，我使用了已经回答的帖子中给出的内容：
$("#createLot").on("show.bs.modal", function() {
$(this).removeAttr('tabindex');
})
这解决了我点击链接时出现对话框的问题。