1

I need to produce content that contains a question and multiple answers. I use ckeditor5 for these contents. The answer part changes dynamically. Pressing the add button creates a new editor to enter a new answer. I have no problem so far.

I have three fixed editors. The first is the question editor. and 2 others are the answer editor. As I said, new answers can be added to the answers.

I want to perceive which editor has changed here, but I have failed. Because it is dynamically created.

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

continuous index value returns -1.

Screen recording : https://drive.google.com/file/d/1bg8trLElIkTf4BBRYeyazav_14qE06bz/preview

Smokie
  • 124
  • 2
  • 9
  • 1
    Related [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) – charlietfl Jul 04 '20 at 23:36
  • Also not sure what `this` is inside the change data callback and `index()` needs to be used on the collection of editors or without argument only returns index of it's siblings – charlietfl Jul 04 '20 at 23:38

0 Answers0