CKEditor instance in a jQuery dialog

2019-02-09 22:06发布

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

11条回答
【Aperson】
2楼-- · 2019-02-09 22:34

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

$(document).on('focusin', function(e) {
     e.stopImmediatePropagation();
});
查看更多
Luminary・发光体
3楼-- · 2019-02-09 22:35

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;       
})
查看更多
太酷不给撩
4楼-- · 2019-02-09 22:38

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.

查看更多
再贱就再见
5楼-- · 2019-02-09 22:41

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.

查看更多
劳资没心,怎么记你
6楼-- · 2019-02-09 22:49

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.

查看更多
做自己的国王
7楼-- · 2019-02-09 22:49

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

$('#modalWindow').dialog({ autoOpen: false, modal: true, zIndex : -1});
查看更多
登录 后发表回答