具有相同文本区域名称的多个 ckeditor 实例

Question

我正在努力在单击添加更多按钮时添加多个 ckeditor...我正在使用 jquery 在添加更多单击时加载一个表单...具有五个字段的表单，其中一个是我想要替换 textarea 的描述文本编辑器。 只有第一个 ckeditor 正在工作...出现在 add more 中的 ckeditor 不工作。 这是html代码

<div class="hid" id="multi_job_example">
            <div class="a-header">
            <div class="fright"><a href="#" class="delete_job">Remove job</a></div>
            <div class="slide"><ins class="i-o"></ins></div>
            <div class="text"></div>
        </div>

        <div class="a-block my-form" id="input1">
            <div class="form-group">
                <label class="col-sm-3 control-label">Email Address:</label>
                <div class="col-sm-5"><input type="text" name="ind_email[]" value="" id="email1" class="form-control"/></div>
            </div>      
            <div class="form-group">
                <label class="col-lg-3 control-label">Job Description: </label>
                <div class="col-lg-7">
                    <textarea class="ckeditor" name="fe_description[]"></textarea>
                </div>
            </div>
        </div>
    </div>
    <ul id="more_job_list" class="a-list">
    </ul>


    <div class="b">
        <a href="#" id="add_job_link" class="btn-link"><ins class="with-icon i-list-add"></ins>Add more job</a>
    </div>
</div>
<script type="text/javascript" src="{$site_root}application/modules/controller/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="{$site_root}application/modules/mycontroller/js/add_multi.js"></script>
<script type="text/javascript">
$(function(){
    new addMultiJob({
        counter: '',
        addLinkId: 'add_job_link',
        liListId: 'more_job_list',
        liIdPrefix: 'job_li_',
        exampleId: 'multi_job_example',
        deleteSelector: 'a.delete_job'
    });
});

</script>

下面是在 add_multi_job.js 文件中添加更多字段的 jquery 代码

function addMultiJob(optionArr){
this.properties = {
    counter: 0,
    addLinkId: 'add_job_link',
    liListId: 'more_job_list',
    liIdPrefix: 'job_li_',
    exampleId: 'multi_job_example',
    deleteSelector: 'a.delete_job',
    headerSelector: 'input.ext_org',
    changed: false
}
var _self = this;

this.Init = function(options){
    _self.properties = $.extend(_self.properties, options);
    _self.properties.counter = parseInt(_self.properties.counter);

    $('#'+_self.properties.addLinkId).bind('click', function(){
        var content = $('#'+_self.properties.exampleId).html();
        _self.properties.counter++;
        content = content.replace(/__NUM__/g, _self.properties.counter);
        $('#'+_self.properties.liListId)
            .append('<li id="'+_self.properties.liIdPrefix+_self.properties.counter+'">'+content+'</li>');

        return false;
    });
    $('#'+_self.properties.liListId+' '+_self.properties.deleteSelector).live('click', function(){
        $(this).parent().parent().parent().remove();
        return false;
    });

    $('#'+_self.properties.liListId+' '+_self.properties.headerSelector).live('keyup', function(){
        $(this).parent().parent().parent().parent().find('.a-header .text').html($('<div/>').text($(this).val()).html());
    });

    $('#'+_self.properties.liListId+' .a-header .slide').live('click', function(){
        if($(this).find('ins').hasClass('i-o')){
            $(this).find('ins').removeClass('i-o').addClass('i-c');
            $(this).parent().parent().find('.a-block').slideUp();
        }else{
            $(this).find('ins').removeClass('i-c').addClass('i-o');
            $(this).parent().parent().find('.a-block').slideDown();
        }
    });

}
_self.Init(optionArr);
}

我正在使用 ckeditor 4.4.6 只在我的视图文件中包含来自 ckeditor 插件的 js 文件

Answer 1

问题是在通过添加更多选项添加文本区域后，您必须启动（重新初始化）ck 编辑器。因为前一个不适用于动态内容加载。