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