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

JamesVB · Accepted Answer · 2013-03-06 00:49:00Z

3

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.

answered Mar 6, 2013 at 0:49

JamesVB

311 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

jproffer · Accepted Answer · 2010-04-14 18:12:47Z

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

answered Apr 14, 2010 at 18:12

jproffer

692 bronze badges

Comments

Luke Ollett · Accepted Answer · 2010-11-11 19:20:06Z

2

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

answered Nov 11, 2010 at 19:20

Luke Ollett

3162 silver badges16 bronze badges

Comments

salihcenap · Accepted Answer · 2014-10-01 07:01:53Z

1

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

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

answered Oct 1, 2014 at 7:01

salihcenap

1,93223 silver badges25 bronze badges

1 Comment

IlludiumPu36 Over a year ago

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

Dustin Laine · Accepted Answer · 2010-03-29 17:21:23Z

0

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

answered Mar 29, 2010 at 17:21

Dustin Laine

38.7k10 gold badges90 silver badges125 bronze badges

1 Comment

Gazillion Over a year ago

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)

Gazillion · Accepted Answer · 2010-04-05 14:26:26Z

0

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.

answered Apr 5, 2010 at 14:26

Gazillion

4,79211 gold badges44 silver badges59 bronze badges

2 Comments

ctorx Over a year ago

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

Gazillion Over a year ago

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.

Marcus · Accepted Answer · 2010-05-16 19:49:23Z

0

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

answered May 16, 2010 at 19:49

Marcus

1

Comments

psy · Accepted Answer · 2012-01-24 03:42:19Z

0

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

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

answered Jan 24, 2012 at 3:42

psy

2,80927 silver badges26 bronze badges

Comments

Prasad Jadhav · Accepted Answer · 2012-10-26 06:45:55Z

0

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

edited Oct 26, 2012 at 6:45

Prasad Jadhav

5,27416 gold badges65 silver badges81 bronze badges

answered Jan 5, 2012 at 8:10

Tran Hung

1

Comments

lkskrt · Accepted Answer · 2013-01-29 11:18:54Z

0

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.

answered Jan 29, 2013 at 11:18

lkskrt

11 bronze badge

Comments

CRUSADER · Accepted Answer · 2013-07-12 11:02:07Z

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

Collectives™ on Stack Overflow

CKEditor instance in a jQuery dialog

11 Answers 11

Comments

Comments

Comments

1 Comment

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

Comments

Comments

Comments

1 Comment

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related