Ckeditor does not load in Fancybox

I have an problem with Ckeditor. When is use an Fancybox Ajax popup, my textarea does not convert to an Ckeditor area.

On top of my page i load Ckeditor:

<script type="text/javascript" src="<?php echo base_url(); ?>scripts/ckeditor/ckeditor.js"></script>

After that i make an textarea. The conversion should normaly be done by the ckeditor class.

<textarea rows="10" cols="80" class="ckeditor" name="short_description"></textarea>

The textarea does not convert. This is caused by AJAX. Does someone has experience with an CKeditor field in an Ajax loaded popup and now how to rebind the Ckeditor on an textarea?

P.S. firebug gives the folowing errors:

SyntaxError: syntax error
[Afbreken op deze fout]     

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://ww

nl.js?t=D2LI (regel 2)

SyntaxError: syntax error
[Afbreken op deze fout]     

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://ww

styles.js?t=D2LI (regel 2)

TypeError: b.lang.contextmenu is undefined
[Afbreken op deze fout]     

...ea,div";CKEDITOR.plugins.add("contextmenu",{requires:"menu",onLoad:function(){CK...

Thanks for help!

/** Comment **/

I use this code for loading the Fancybox:

$('a.fancybox').fancybox({
    type:'ajax',
    scrolling:'no',
    autoSize:true,
    afterShow:_init_ajax_forms
});

Solution

I don't understand the errors, but I think this might be because the DOM element gets replaced only if it exists during an event after the DOM is ready. After that initial attempty CKEDITOR doesn't try to replace elements automatically.

Assuming that afterShow is a callback function (I don't grok fancybox), try to do the textarea replacing inside _init_ajax_forms or use something like this.

afterShow:function() {
    CKEDITOR.replace('myLittlePony');
    _init_ajax_forms();
}

And use a textarea like

<textarea id="myLittlePony" name="myLittlePony"></textarea>

If that is not an ajax callback like I thought, find out what is and do the replace there.