大佬教程收集整理的这篇文章主要介绍了jquery – CKEditor inline in modal bootstrap window，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我看过这篇文章：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()
}
})
};
<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：
有人能帮帮我吗？
所以你简单地说：
CKEDITOR.disableAutoInline = true;
$('#mymodal').on('shown.bs.modal',function () {
CKEDITOR.inline('mymodalLabel');
CKEDITOR.inline('bodymodal');
});
更新：
为此,我们可以有功能：
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); }
以上是大佬教程为你收集整理的jquery – CKEditor inline in modal bootstrap window全部内容，希望文章能够帮你解决jquery – CKEditor inline in modal bootstrap window所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。