CKEditor instance in a jQuery dialog

Question

I am using jQuery to open a dialog window with a textarea transformed into an instance of CKEditor. I'm using the jQuery adapter provided by the CKEditor team but when the dialog window opens up I cannot interact with the editor (it's created but "null" is written in the content space and I can't click on anything or modify the content).

This bug report seems to say that by using a patch provided the issue is fixed but it doesn't seem to be working for me...

Here's my code (maybe I did something wrong programmatically):

HTML:

<div id="ad_div" title="Analyse documentaire">
<textarea id="ad_content" name="ad_content"></textarea>
</div>

My includes (Everything is included correctly but maybe it's an including order issue?):

<script type="text/javascript" src="includes/ckeditor/ckeditor.js"></script>
<link rel="stylesheet" type="text/css" href="includes/jquery/css/custom-theme/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript" src="includes/jquery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="includes/jquery/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="includes/jquery/plugins/dialog-patch.js"></script>
<script type="text/javascript" src="includes/ckeditor/adapters/jquery.js"></script>

Javascript:

$('#ad_content').ckeditor();

/* snip */

$('#ad_div').dialog(
{
    modal: true,
    resizable: false,
    draggable: false,
    position: ['center','center'],
    width: 600,
    height: 500,
    hide: 'slide',
    show: 'slide',
    closeOnEscape: true,
    autoOpen: false
});

$('.analyse_cell').click(function(){
    $('#ad_div').dialog('open');
});

Edit: After some further testing I noticed that pressing on the toolbar buttons gave me this error:

Error: this.document.getWindow().$ is undefined Source File: includes/ckeditor/ckeditor.js Line: 82

Reprieve

Answer 1

Well for some reason I couldn't get it to work but managed to get the same effect by implementing the same functionality by hand.

Reprieve

Please share which aspects were coded by hand so we can make use of it too. Thx. – Action

I created a div that was positioned fix over the whole viewport and embedded the ckeditor in there. It's not elegant and doesn't use any of jQuery's fancy features so I figured it wasn't worth including... I circumvented the problem, I didn't fix it. – Reprieve

Answer 2

I used a callback function with the "show:" option to delay instantiating CKEditor until after the "show" animation was complete. I found that as little as 50 milliseconds will do the trick.

modal: true,
show: {
    effect: "drop",
    complete: function() {
        setTimeout(function(){
            $( "#selector" ).ckeditor();
        },50);
    }
},
hide: "drop",

Hope this helps.

Nematode

Answer 3

$('.analyse_cell').click(function(){
    $('#ad_div').dialog({
        modal: true,
        resizable: false,
        draggable: false,
        position: ['center','center'],
        width: 600,
        height: 500,
        hide: 'slide',
        show: 'slide',
        closeOnEscape: true,
        autoOpen: false,
        open: function(event,ui) {
            $('#ad_content').ckeditor();
        },
        close: function(event,ui) {
            CKEDITOR.remove($("#ad_content").ckeditorGet());
        }
    });
});

Guertin

Answer 4

Use the latest version of CKEditor. Solved it for me. Version 3.4.2

Mockingbird

Answer 5

Simply add this snippet to your doc and the problem is solved!

$(document).on('focusin', function(e) {
     e.stopImmediatePropagation();
});

Garibull

doesn't work for me using CK Editor and UI Dialog... – Anosmia

Answer 6

Try putting the below the adapter. The fix is overriding the adapter.

Sabaean

I moved the fixed below the adapter and I tried removing it completely and both seems to have no effect. I clicked on some of the buttons and I got this error: Error: this.document.getWindow().$ is undefined Source File: includes/ckeditor/ckeditor.js Line: 82 Hopefully that will give us some insight as to what the real problem is :) (thanks a lot BTW) – Reprieve

Answer 7

I encountered the same problem and for some reason I found that putting some text into the textarea before opening the dialog could do the trick. Not a real solution, but works for me.

$('#ad_content').ckeditor();

/* snip */

$('#ad_div').dialog(
{
    modal: true,
    /* Your options here. */
});

$('.analyse_cell').click(function(){
    // Add some content into textarea.
    $('#ad_content').val("Enter content here.");
    $('#ad_div').dialog('open');
});

Gallego

Answer 8

I am using jQuery to open a dialog window with a textarea transformed into an instance of CKEditor. I'm using the jQuery adapter provided by the CKEditor team but when the dialog window opens up I cannot interact with the editor (it's created but null is written in the content space and I can't click on anything or modify the content).

Error: this.document.getWindow().$ is undefined Source File: includes/ckeditor/ckeditor.js
Line: 129

I am using Version 3.6.2

Whole

Answer 9

I solved this by simply adding zIndex=-1 in the jQuery UI Dialog constructor like so

$('#modalWindow').dialog({ autoOpen: false, modal: true, zIndex : -1});

Middleton

Answer 10

Just solved the exact same problem by disabling the jQuery UI effect on the popup dialog (show option).

Took me like forever to figure this out. Now the editor is behaving as expected.

Lozoya

Answer 11

Mysticism, but it helped for me. Before create dialog i forcibly set empty data

CKEDITOR.instances['email_text_of_message'].setData('')

and ckeditor ("ckeditor", "~> 3.4") in dialog works fine.

$("#create_email").click(function(event){

CKEDITOR.instances['email_text_of_message'].setData('')

$("#email_body").dialog({    modal: true,
                             minHeight: 720,
                             minWidth: 900,
                             buttons: [
                            {
                             id: "button_create_email",
                             text: $('#inv_notice16').text(),
                             click: function() {
                                    $("#email_body").dialog('close')
                           }
                            }]}); 
    return false;       
})

Sayles