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.

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.

It's so simple and doesn't create any script conflict.    
<!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8">
        <meta name="robots" content="noindex, nofollow">
        <title>Classic editor with default styles</title>
        <script src="http://cdn.ckeditor.com/4.6.2/standard-all/ckeditor.js"></script>
    </head>

    <body>

        <textarea cols="80" id="editor1" name="editor1" rows="10" >&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;
        </textarea>

        <script>
            CKEDITOR.replace( 'editor1', {
                height: 260,
                width: 700,
            } );
        </script>
    </body>

    </html>

来源：https://stackoverflow.com/questions/31678662/ckeditor-issue-with-bootstrap-modal

标签

twitter-bootstrap

ckeditor