Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CKEditor issue with Bootstrap modal

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">&times;</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.

like image 993
pinaki Avatar asked Dec 04 '22 02:12

pinaki


1 Answers

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.

like image 93
Reinmar Avatar answered Jan 25 '23 18:01

Reinmar