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

在 php 和 jquery 中单击追加时无法加载 ckeditor

ckeditor cannot load when append by click in php and jquery

jquery

ckeditor