モーダルブートストラップ内でCKEditorをインラインで使用する必要がありますが、機能していません...
私はこの投稿を読みました:ブートストラップモーダルでCKEditorを使用する方法は?
ただし、インラインを使用しているため、一部のフィールドに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:
誰か助けてくれませんか?
結局のところ、私は2つの答えを組み合わせました...そしてそれは今機能しています...あなたはどう思いますか?
$(document).ready(function(e) {
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline('myModalLabel');
CKEDITOR.inline('bodyModal');
$('#myModal').on('shown.bs.modal', function () {
ckCreate('myModalLabel');
ckCreate('bodyModal');
});
});
function ckCreate(name) {
if (CKEDITOR.instances[name]) {
var instance = CKEDITOR.instances[name];
if (instance.element.$) {
instance.destroy(true);
}
$('#' + name).attr('contenteditable', true);
CKEDITOR.inline(name);
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加