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

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.

Answer 2

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

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());
        }
    });
});

Answer 4

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');
});

Answer 5

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;       
})

Answer 6

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

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