CKEditor instance in a jQuery dialog

问题

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

回答1:

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.

回答2:

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

回答3:

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

回答4:

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

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

回答5:

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

回答6:

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.

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

回答8:

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

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

回答9:

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

回答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.

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

来源：https://stackoverflow.com/questions/2539855/ckeditor-instance-in-a-jquery-dialog

标签

jquery

ckeditor

jquery-dialog