I am having the same issue as pointed on How to use CKEditor in a Bootstrap Modal?
The problem however is that the fix doesnt seem to work any more.
<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>
I have put a fiddle (with the suugested fix added) on http://jsfiddle.net/7zDay/16/. Try using the math editor (using the sigma icon) and you would see that it does not let you type in the box.
Any help is appreciated.
Try the solution described in this guide:
$.fn.modal.Constructor.prototype.enforceFocus = function() {
$( document )
.off( 'focusin.bs.modal' ) // guard against infinite focus loop
.on( 'focusin.bs.modal', $.proxy( function( e ) {
if (
this.$element[ 0 ] !== e.target && !this.$element.has( e.target ).length
// CKEditor compatibility fix start.
&& !$( e.target ).closest( '.cke_dialog, .cke' ).length
// CKEditor compatibility fix end.
) {
this.$element.trigger( 'focus' );
}
}, this ) );
};
Demo: http://jsfiddle.net/7zDay/17/. Works fine for me. AFAICS this is a more general fix.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With