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（）方法内部。

如果你将replace参数硬编码为'1'，它只会将id为1的textarea的第一个实例转换为CKEditor并忽略其他实例。动态生成Id并将其传递给repalce方法。如下所示，

var step = 'step'+counter; 

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

CKEDITOR.replace(step);

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

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

Answer 2

这样使用。

<textarea class="ckeditor" name="abc1"</textarea>

然后在JS中添加

CKEDITOR.replaceAll( 'ckeditor' );

我希望它适用于所有文本区域。

CKeditor具有多重动态textareas

2 个答案: