通过在php和jquery中单击附加时ckeditor无法加载

Question

我的代码如下，

<div id="show_ck">
    <div style="width:80%; float:left;"> 
        <textarea name="test_0" class="ckeditor" ></textarea> 
    </div> 
    <div style="width:20%; float:left;"> 
        <img class='btnAddMore' width='30px' height='30px' src='img/add_btn.png' alt='Add' /> 
    </div>
    <div style="clear:both;"></div>
</div>

<script src="jquery-1.11.2.js"> </script>
<script src="ckeditor/ckeditor.js"> </script>
<script>
$(document).ready(function(){
    var count = 1;
    $(document).on('click','.btnAddMore', function() {
        var add_more = '<div> <textarea name="test_'+count+'" class="ckeditor" ></textarea> </div>';
        count++;
        $("div#show_ck").append(add_more);
    });
});
</script>

第一次， CK EDITOR加载成功但当我点击加上图片时，CK EDITOR无法加载。

如何在点击加图像时加载CK EDITOR（每个CK EDITOR都会）。 如何解决。请帮忙吗？

Answer 1

动态添加新的ckeditor时，可以通过动态替换现有元素来实现。

$(document).ready(function(){
    var count = 1;
    $(document).on('click','.btnAddMore', function() {
       var add_more = '<div id="ck_'+count+'"><textarea id="replace_element_'+count+'"></textarea></div>';
       $("div#show_ck").append(add_more);
       CKEDITOR.replace( 'replace_element_' + count );
       count++;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.ckeditor.com/4.4.7/standard-all/ckeditor.js"> </script>
<div id="show_ck">
    <div style="width:80%; float:left;"> 
        <div id="ck_0"><textarea name="test_0" class="ckeditor" id="editor_0" ></textarea></div> 
    </div> 
    <div style="width:20%; float:left;"> 
        <img class='btnAddMore' width='30px' height='30px' src='img/add_btn.png' alt='Add' /> 
    </div>
    <div style="clear:both;"></div>
</div>