WYSIWYG Area won't initialize correctly inside a jQuery UI Dialog (Webkit & Firefox)

[Florian Ignaz Eßl]

OS: Win7, Browsers tested: Google Chrome 19, Firefox 12

If CKEDITOR is initialized inside a jQuery UI Dialog the WYSIWYG Area is just empty and editing is impossible until the display mode is switched manually via the "Source code" button. Resizing, clicking on formatting options will result in exceptions:

"this.document.getWindow().$.xxxxxx" -> "Cannot call method xxxxxx of undefined"

In IE9 everything seems to work as expected.

A short example is provided as attachment.

[Jakub Ś]

HI,

Your effects are to blame here:

show: "blind",
hide: "fade",

Removing them resolved the problems also setting timeout in dialog.html did the trick

setTimeout(function(){
	var editor = CKEDITOR.instances['htmlEditor'];
        ...
        editor.on('instanceReady', function(ev){
		ev.editor.setData('<p>Lorem ipsum</p>');
	});
},2000); 

You should either remove those effects or call CKEditor in callback function for those effects (if there is one).

Please also note that with actions like setting editors data it's best to make them after CKEditor has full loaded

editor = CKEDITOR.replace('htmlEditor');
editor.on('instanceReady', function(ev){
	ev.editor.setData('<p>Lorem ipsum</p>');
});