CKEDITOR.replace() is hiding the textarea that I want converted

Question

I'm using Javascript to create a textarea that I want to be a ckeditor. My code is something like

var html = '<textarea name="text"></textarea>';
$('#mydiv').append(html);  
var textareas = document.getElementsByTagName('textarea');  
// Could be more than one textarea   
for (i = 0; i<textareas.lenght; i++) {  
    var textarea = textareas[i];  
    CKEDITOR.replace(textarea.name); 
}

When I run this code and check the output the textarea is hidden. Inspecting it in firebug I'm getting a style="visibilty:hidden". However removing this just gives me a textarea and not a ckeditor. Does anyone have any suggestions on how to solve it.

Putting it as a div worked but the examples all seemed to be in textareas.

Answer 1

The hiding is correct. Because the <textarea/> has no wysiwyg support. The .replace() method replaces the <textarea/> with it's wysiwyg Editor. That's why it's hidden.

CKEDITOR.replace(elementOrIdOrName, config)
Replaces a or a DOM element (DIV) with a CKEditor instance. Source

As you can see in the documentation you don't need to append the <textarea/>, instead you could use your div directly:

CKEDITOR.replace('mydiv')

Answer 2

I got the ckeditor to display as I wanted by using a new div and the ckeditor JQuery adapter. The code is something like this

html= '<div class="ckeditor"></div>';
$('#mydiv').append(html);
$('.ckeditor').ckeditor();

This worked for me.