如何在页面上克隆或添加多个ck编辑器

Question

我想要多个textarea （ck编辑器），用户可以在其中输入多个数据，我尝试了jquery的各种功能和方法，例如clone()和appendTo但问题是它们正在克隆textarea但是在克隆textarea之后ckeditor无法正常工作我无法在其中写任何东西，请帮帮我。

这就是我尝试过的

test1 http://jsfiddle.net/FADxv/793/

test2 http://jsfiddle.net/kbqjnecx/3/

谢谢

Answer 1

向每个新的textarea添加一个id ，并使用CKEditor.replace(id [,config])手动初始化编辑器

就像是：

$(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            var editorId = 'editor_' + x;
            $(wrapper).append('<div> <textarea id="'+editorId+'" class="ckeditor" name="ck[]"></textarea><a href="#" class="remove_field">Remove</a></div>'); //add input box

            CKEDITOR.replace(editorId, { height: 200 });
        }
    });

DEMO

Answer 2

检查此克隆ckeditor。

检查此小提琴： http : //jsfiddle.net/manektech/47htysb5/

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

如何在页面上克隆或添加多个ck编辑器

问题描述

2 个解决方案

解决方案1
3 已采纳 2018-07-11 12:59:49

解决方案2
1 2019-03-06 05:44:46

如何在页面上克隆或添加多个ck编辑器

问题描述

2 个解决方案

解决方案1 3 已采纳 2018-07-11 12:59:49

解决方案2 1 2019-03-06 05:44:46

解决方案1
3 已采纳 2018-07-11 12:59:49

解决方案2
1 2019-03-06 05:44:46