CKeditor with multible dynamic textareas

Question

我有一个允许多个步骤提交的表单。当用户点击“添加步骤”时，会出现另一个文本区域。我正在使用CKeditor。它在第一次迭代中效果很好，但在随后的所有版本中，它显示了一个标准文本区域。这里是我的代码：

<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> 

我怎样才能使每个新的动态创建的文本区域也使用CKeditor？我一直在努力工作好几个小时，我很难过。

Answer 1

我认为你需要移动CKEDITOR.replace（'1'）;在return语句之前else块中的addTextArea（）方法内。

而且，如果您将替换参数硬编码为'1'，则它只会将第一个id为1的textarea实例转换为CKEditor并忽略其他参数。动态生成一个Id并将其传递给repalce方法。像下面这样，

var step = 'step'+counter; 

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

CKEDITOR.replace(step); 

我还没有写完第二步，我想你可以根据需要修改它。

我正在研究类似的功能，这种方法适用于我。