Question

问题 - 在我的html页面上有一个textarea。代码是 -

<div id ="textFields" class="form-group">
        <p align="center">
        <br>
        <textarea placeholder="Enter note, max limit 200 words" class="form-control" rows="5" id="note" style="width: 80%;overflow:auto;"></textarea>
            <script>CKEDITOR.replace( 'note' );</script>
         </p>
</div>

现在我想创建多个textareas，我使用Add按钮和jQuery代码 -

$(document).ready(function(){
$("#addNew").click(function () {
    var inputField = jQuery('<p align="center"><br><textarea placeholder="Enter note, max limit 200 words" class="form-control" rows="5" id="note" style="width: 80%;overflow:auto;"></textarea><script>CKEDITOR.replace( 'note' );</script></p>');
    jQuery('#textFields').append(inputField);
}); });

单击#addNew按钮时，将创建textarea但未加载CKEditor脚本。这导致了没有CKEditor功能的普通文本区域。

如何使用CKEditor功能创建新的textarea？还有另外一种方法吗？我的做法错了吗？

Answer 1

首先，id是html中的唯一标识符，您不应该多次使用它。

其次，您无法以这种方式添加执行的脚本标记。我建议像这样重构你的代码

<div id ="textFields" class="form-group">
    <p align="center">
        <br>
        <textarea id="note0" placeholder="Enter note, max limit 200 words" class="form-control" rows="5" style="width: 80%;overflow:auto;"></textarea>
    </p>
</div>

使用以下javascript

$(document).ready(function(){
    var note_id = 0;
    CKEDITOR.replace('note0');
    $("#addNew").click(function () {
        note_id++;
        var inputField = $('<p align="center"><br><textarea id="note' + note_id + '" placeholder="Enter note, max limit 200 words" class="form-control" rows="5" style="width: 80%;overflow:auto;"></textarea></p>');
        $('#textFields').append(inputField);
        CKEDITOR.replace('note' + note_id);
    });
});

在动态创建的textareas中实现脚本

1 个答案: