CKEditor issue with Bootstrap modal

Question

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.

score 18 · Accepted Answer · answered Jul 28 '15 at 14:21

18

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.

answered Jul 28 '15 at 14:21

Reinmar

21,729
4
67
78

WFM in Chrome and Firefox. – Reinmar Jul 05 '16 at 12:46
This is what I [see](https://i.stack.imgur.com/kiG04.png) on Mac with Chrome and Safari. Do you see the toolbar in the jsFiddle? – new name Mar 19 '17 at 22:16
Works really nice!! – CrsCaballero Oct 16 '17 at 21:26
This didn't work for me. My Link Popup for CKEditor comes up just behind the main source modal dialog. It could be a z-index or something – gene b. Sep 24 '19 at 18:11
after wasting 7 hours i found this as working , Thanks – Muhammad Safeeullah Sarhandi Nov 12 '19 at 08:37

score 1 · Answer 2 · answered Jun 13 '22 at 16:50

1

For whoever found the accepted solution not working, just add this CSS class:

.ck {z-index: 9999 !important;}

answered Jun 13 '22 at 16:50

mimskydo

46
8

score -1 · Answer 3 · answered May 24 '17 at 09:46

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>

The question involved bootstrap modals, which is not addressed here. — Alex, Dec 13 '17 at 22:20

CKEditor issue with Bootstrap modal

3 Answers3

Linked