我需要在模态引导程序中使用CKEditor内联,但它不起作用……
我看过这篇文章：How to use CKEditor in a Bootstrap Modal?
但它与我不同,因为我正在使用内联,我只需要将CKEditor应用于某些字段(我有其他使用contenteditable属性).
JS代码：
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline('myModalLabel');
CKEDITOR.inline('bodyModal');
$.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()
}
})
};
HTML代码
<button type="button" data-toggle="modal" data-target="#modalAddBrand">Launch modal</button>
<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</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>
</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>
的jsfiddle：
JSFiddle Example
有人能帮帮我吗？
解决方法
问题是,当你初始化CKEDITOR实例时,那个时间目标是隐藏的,所以如果你在目标显示后实例化编辑器它将会：
所以你简单地说：
CKEDITOR.disableAutoInline = true;
$('#myModal').on('shown.bs.modal',function () {
CKEDITOR.inline('myModalLabel');
CKEDITOR.inline('bodyModal');
});
但在关闭并重新打开模态后,您可能会收到错误：
Uncaught The editor instance “myModalLabel” is already attached to the provided element
更新：
为此,我们可以有功能：
function ckCreate(name)
{
if(CKEDITOR.instances[name] === undefined)
{
CKEDITOR.inline(name);
}
}
只有在不存在的情况下才创建实例;
最后你的代码是：
CKEDITOR.disableAutoInline = true;
$('#myModal').on('shown.bs.modal',function () {
ckCreate('myModalLabel');
ckCreate('bodyModal');
});
最终小提琴：http://jsfiddle.net/0vLs3fku/4/
更新：需要销毁实例
function ckCreate(name)
{
if (CKEDITOR.instances[name])
{
CKEDITOR.instances[name].destroy();
}
CKEDITOR.inline(name);
}