Есть несколько DIV "contenteditable", где прописываем поэтапно рецепт блюда. Введенная информация (текст) автоматом передается из всех DIV в textarea по порядку. Если в первый DIV введена какая-то информация, в textarea она прописывается в теге LI, и так по порядку.
Но когда необходимо отредактировать новость, все поля DIV становятся пустыми, лишь в textarea находится вся информация.
Нужно чтобы при редактировании новости из тега LI зеркально передавался текст по порядку в каждый див, как при первичном внесении.
Как на первом скрине.
Код текстовых поле куда вносится текст:
<div class="editor wysiwygeditor"></div>
<div class="editor wysiwygeditor"></div>
<div class="editor wysiwygeditor"></div>
<div class="editor wysiwygeditor"></div>
<textarea name="xfield[dop-sortstory-instrukt]" id="xf_[dop-sortstory-instrukt]" class="wysiw" required="required"></textarea>
Скрипт, который выводит из всех полей информацию в textarea:
$(document).on('input', '.editor', function() {
const content = $('.editor')
.get()
.map(n => `\n <li>${$(n).html()}</li>`)
.join('');
$('.wysiw').val(`<ul>${content}\n</ul>`);
});