Javascript 如何在一个页面中使用类添加多个ckeditor？_Javascript_Jquery_Html_Laravel_Ckeditor

Javascript 如何在一个页面中使用类添加多个ckeditor？

javascript jquery html laravel ckeditor

Javascript 如何在一个页面中使用类添加多个ckeditor？,javascript,jquery,html,laravel,ckeditor,Javascript,Jquery,Html,Laravel,Ckeditor,我试图在一个页面中使用单个类添加多个ckeditor。通过单击添加更多链接，我想添加动态编辑器。下面是我的代码 <script src="https://cdn.ckeditor.com/4.11.3/standard/ckeditor.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> &l

我试图在一个页面中使用单个类添加多个ckeditor。通过单击添加更多链接，我想添加动态编辑器。下面是我的代码

<script src="https://cdn.ckeditor.com/4.11.3/standard/ckeditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">
    CKEDITOR.replace( 'editor1' );
</script>


<textarea class="editor1"></textarea>
<textarea class="editor1"></textarea>
<textarea class="editor1"></textarea>
<textarea class="editor1"></textarea>


CKEDITOR.replace（'editor1'）；

首先，给所有

textarea

元素一个ID

<textarea class="editor1" id="editor1"></textarea>
<textarea class="editor1" id="editor2"></textarea>
<textarea class="editor1" id="editor3"></textarea>
<textarea class="editor1" id="editor4"></textarea>

首先，给所有

textarea

元素一个ID

<textarea class="editor1" id="editor1"></textarea>
<textarea class="editor1" id="editor2"></textarea>
<textarea class="editor1" id="editor3"></textarea>
<textarea class="editor1" id="editor4"></textarea>

根据ckeditor，如果您使用“ckeditor”类，它将自动生成编辑器。如下图所示

<textarea class="ckeditor" required="" name="question_option_1" ></textarea>
<textarea class="ckeditor" required="" name="question_option_2" ></textarea>
<textarea class="ckeditor" required="" name="question_option_3" ></textarea>

似乎您要克隆ckeditor

 <html>
        <head>
            <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
            <script src="http://cdn.ckeditor.com/4.5.4/standard/ckeditor.js"></script>
        </head>
        <body>
            <div class="row hide_mail_id_domain">
                <div class="col-sm-12">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Option</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <textarea class="ckeditor" required="" name="question_option_1" ></textarea>
                                    <textarea class="ckeditor" required="" name="question_option_1" ></textarea>
                                    <textarea class="ckeditor" required="" name="question_option_1" ></textarea>
                                </td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                    <a href="javascript:void(0)" class="btn btn-success add_more right" style="float: right;">Add More</a>
                </div>
            </div>
            <script>
                var REMOVE = '';
                var i=1;
                $(document).ready(function () {
                    $('.add_more').click(function () {
                        var oneplus=i+1;
                        var tr_object = $('tbody').find('tr:first').clone();
                        // getting and renaming existing textarea by name.
                        $(tr_object).find('textarea[name="question_option_1"]').attr("name", "question_option_"+oneplus+"");
                        $(tr_object).find('input').val(''); 
                        $(tr_object).find('td:last').html('<a href="javascript:void(0)" class="btn btn-danger remove_more">Remove</a>');
                        $('tbody').append(tr_object);
                        //replace code
                        CKEDITOR.replace("question_option_"+oneplus+"");
                        // when i were clicking on add more during my testing , then extra cke-editor id also appending to DOM. so for removing other then first
                        // included below code
                        $('#cke_question_option_1').each(function() {
                            var $ids = $('[id=' + this.id + ']');
                            if ($ids.length > 1) {
                                $ids.not(':first').remove();
                            }
                        });
                        i=i+1;
                        oneplus++;
                    });
                    $(document).on('click', '.remove_more', function () {
                        var id = $(this).closest('tr').find('.id').val();
                        if (id != '') {
                            if (REMOVE != '') {
                                REMOVE = REMOVE + ',' + id;
                            } else {
                                REMOVE = id;
                            }
                            $('#id').val(REMOVE);
                        }
                        $(this).closest('tr').remove();
                    });
                });
            </script>
        </body>
    </html>


选项
行动
var REMOVE=''；
var i=1；
$（文档）.ready（函数（）{
$（'.add_more'）。单击（函数（）{
var oneplus=i+1；
var tr_object=$（'tbody'）.find（'tr:first'）.clone（）；
//按名称获取和重命名现有textarea。
$（tr_对象）.find（'textarea[name=“question_option_1”]”）。attr（“name”，“question_option_”+oneplus+”）；
$（tr_对象）.find（'input'）.val（''）；
$（tr_object.find（'td:last'）.html（“”）；
$（'tbody'）.append（tr_对象）；
//替换代码
CKEDITOR.replace（“问题选项+oneplus+”）；
//当我在测试期间单击AddMore时，额外的cke编辑器id也会附加到DOM中
//包括以下代码
$（'cke#question_option_1'）。每个（函数（）{
var$ids=$（'[id='+this.id+']'）；
如果（$ids.length>1）{
$ids.not（“：first”）.remove（）；
}
});
i=i+1；
oneplus++；
});
$（文档）。在（'单击'，'上。删除更多'，函数（）{
var id=$（this.nexist（'tr'）.find（'.id'）.val（）；
如果（id！=''）{
如果（删除！=''）{
移除=移除+'，'+id；
}否则{
移除=id；
}
$（'#id'）.val（删除）；
}
$（this）.closest（'tr'）.remove（）；
});
});

根据ckeditor，如果您使用“ckeditor”类，它将自动生成编辑器。如下图所示

<textarea class="ckeditor" required="" name="question_option_1" ></textarea>
<textarea class="ckeditor" required="" name="question_option_2" ></textarea>
<textarea class="ckeditor" required="" name="question_option_3" ></textarea>

似乎您要克隆ckeditor

 <html>
        <head>
            <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
            <script src="http://cdn.ckeditor.com/4.5.4/standard/ckeditor.js"></script>
        </head>
        <body>
            <div class="row hide_mail_id_domain">
                <div class="col-sm-12">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Option</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <textarea class="ckeditor" required="" name="question_option_1" ></textarea>
                                    <textarea class="ckeditor" required="" name="question_option_1" ></textarea>
                                    <textarea class="ckeditor" required="" name="question_option_1" ></textarea>
                                </td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                    <a href="javascript:void(0)" class="btn btn-success add_more right" style="float: right;">Add More</a>
                </div>
            </div>
            <script>
                var REMOVE = '';
                var i=1;
                $(document).ready(function () {
                    $('.add_more').click(function () {
                        var oneplus=i+1;
                        var tr_object = $('tbody').find('tr:first').clone();
                        // getting and renaming existing textarea by name.
                        $(tr_object).find('textarea[name="question_option_1"]').attr("name", "question_option_"+oneplus+"");
                        $(tr_object).find('input').val(''); 
                        $(tr_object).find('td:last').html('<a href="javascript:void(0)" class="btn btn-danger remove_more">Remove</a>');
                        $('tbody').append(tr_object);
                        //replace code
                        CKEDITOR.replace("question_option_"+oneplus+"");
                        // when i were clicking on add more during my testing , then extra cke-editor id also appending to DOM. so for removing other then first
                        // included below code
                        $('#cke_question_option_1').each(function() {
                            var $ids = $('[id=' + this.id + ']');
                            if ($ids.length > 1) {
                                $ids.not(':first').remove();
                            }
                        });
                        i=i+1;
                        oneplus++;
                    });
                    $(document).on('click', '.remove_more', function () {
                        var id = $(this).closest('tr').find('.id').val();
                        if (id != '') {
                            if (REMOVE != '') {
                                REMOVE = REMOVE + ',' + id;
                            } else {
                                REMOVE = id;
                            }
                            $('#id').val(REMOVE);
                        }
                        $(this).closest('tr').remove();
                    });
                });
            </script>
        </body>
    </html>


选项
行动
var REMOVE=''；
var i=1；
$（文档）.ready（函数（）{
$（'.add_more'）。单击（函数（）{
var oneplus=i+1；
var tr_object=$（'tbody'）.find（'tr:first'）.clone（）；
//按名称获取和重命名现有textarea。
$（tr_对象）.find（'textarea[name=“question_option_1”]”）。attr（“name”，“question_option_”+oneplus+”）；
$（tr_对象）.find（'input'）.val（''）；
$（tr_object.find（'td:last'）.html（“”）；
$（'tbody'）.append（tr_对象）；
//替换代码
CKEDITOR.replace（“问题选项+oneplus+”）；
//当我在测试期间单击AddMore时，额外的cke编辑器id也会附加到DOM中
//包括以下代码
$（'cke#question_option_1'）。每个（函数（）{
var$ids=$（'[id='+this.id+']'）；
如果（$ids.length>1）{
$ids.not（“：first”）.remove（）；
}
});
i=i+1；
oneplus++；
});
$（文档）。在（'单击'，'上。删除更多'，函数（）{
var id=$（this.nexist（'tr'）.find（'.id'）.val（）；
如果（id！=''）{
如果（删除！=''）{
移除=移除+'，'+id；
}否则{
移除=id；
}
$（'#id'）.val（删除）；