CKeditor with multible dynamic textareas

Question

I have a forms which allows multiple steps to be submitted. When a user clicks "add step" another textarea appears. I am using CKeditor. It works great of the first iteration, but on all subsequent ones, it shows a standard text area. Here is my code:

<form method="post" action="process_project.php">
<b>Steps for your project:</b>
<div>&nbsp;</div>
Step 1
<div id="divWho">
<textarea name="projSteps[]" class="steps" id="1" rows="10" cols="60"></textarea> 
</div>
<div>&nbsp;</div>
<input type="button" value="Add project step" onClick="addTextArea();">
<input type="submit" name="submit" value="submit" />
</form>


<script type="text/javascript">
var counter = 1;
var limit = 11;
function addTextArea() {
if (counter == limit-1) {
alert("You have reached the limit of adding " + counter + " project steps");
return false;
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Step " + (counter + 1) + " <br><textarea name='projSteps[]' id=counter rows='10' cols='60'>";
document.getElementById('divWho').appendChild(newdiv);
counter++
return true;
}
}
</script>
<script> CKEDITOR.replace('1');</script>

How can I make each new dynamically created text areas also use CKeditor? I have been working on this for hours and I am stumped.

Answer 1

I think you need to move CKEDITOR.replace('1'); inside the addTextArea() method enclosed in the else block before the return statement.

And also if you hard code the replace parameter to '1', it will only convert the first instance of textarea with id 1 to CKEditor and ignore others. Generate an Id dynamically and pass it to repalce method. Something like below,

var step = 'step'+counter; 

div = <textarea name='projSteps[]' id=step rows='10' cols='60'>; 

CKEDITOR.replace(step);

I haven't written the second step completely, I guess you can modify it as you need.

I'm working on a similar functionality and this approach works for me.