javascript - 我如何知道使用多个 ckeditor 5 更改了哪个编辑器的值？

Question

我需要制作包含一个问题和多个答案的内容。我对这些内容使用ckeditor5。答案部分动态变化。按下添加按钮会创建一个新编辑器来输入新答案。到目前为止我没有问题。

我有三个固定的编辑器。首先是问题编辑器。其他 2 人是答案编辑器。正如我所说，新的答案可以添加到答案中。

想感知这里改了哪个编辑器，但是失败了。因为它是动态创建的。

       <div class="row">
            <div class="col-xl">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Question</h5>
                        <div id="editor" class="editor"></div>
                        <br />
                        <button id="answer" type="button" class="btn btn-primary float-right">Cevap Ekle</button>
                        <input type="hidden" name="editor" id="inputeditor">
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Answer</h5>
                        <div id="editor" class="editor"></div>
                        <input type="hidden" name="editor" id="inputeditor">

                    </div>
                </div>
            </div>
        </div>

        <div class="row" id="answerDiv">
            <div class="col-xl">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Answer</h5>
                        <div id="editor" class="editor"></div>
                        <input type="hidden" name="editor" id="inputeditor">

                    </div>
                </div>
            </div>
        </div>

javascript：

<script>
    var editorSetting = {
        toolbar: [ 'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', 'underline', '|', 'imageUpload', 'imageStyle:full', '|', 'blockQuote', '|', 'link' ],
        ckfinder: {
            uploadUrl: '{{ route('question.upload') }}'
        }
    };

    var allEditors = document.querySelectorAll('.editor');

    for (var i = 0; i < allEditors.length; i++) {
        ClassicEditor.create(allEditors[i], editorSetting).then(
            editor => {
                editor.model.document.on( 'change:data', ( evt, data ) => {
                    console.log($(this).index())
                    $('#inputeditor:eq(' + parseInt(i) + ')').val(i)
                } );
            });
    }

    $(document).on('click', '#answer', function () {
        var max = 3;

        if(document.querySelectorAll('.editor').length <= max)
            $('.row:eq(3)').clone().insertAfter('#answerDiv');
    });

</script>

连续索引值返回 -1。

屏幕录制：https ://drive.google.com/file/d/1bg8trLElIkTf4BBRYeyazav_14qE06bz/preview

标签： javascriptjqueryckeditor