Как передать текст из несколько contenteditable в один textarea?

Question

[Дмитрий]

Есть текстовый редактор быстрого редактирование прямо в div "contenteditable".
Есть textarea в который и должно передаваться содержимое с div.
Я нашел скрипт, который работает и все выводит, к тому же, все прописывает в реальном времени в textarea, что очень круто.
Но задача в том, что мне нужно вывести информацию из несколько div в один textarea, расположив их по порядку.
То есть есть 5 шт div-ов, в которых можно писать текст, есть один textarea, в который и нужно передать весь этот текст из всех div.
Вывел 5 шт div на странице, информация передается только с первого редактора, а все остальные не передают.
Мне нужно чтобы каждый DIV передавался и прописывался с новой строки, и был завернут в <li>.

<div class="editor" contenteditable="true"></div>
    <div class="editor" contenteditable="true"></div>
    <div class="editor" contenteditable="true"></div>
    <div class="editor" contenteditable="true"></div>
    <div class="editor" contenteditable="true"></div>

    <textarea id="txtarea" rows="10" cols="45" name="text"></textarea>

.editor {
    min-height:100px;
    border: 1px solid #ccc; 
}

$(function() {
$(".editor").keyup(function() {
    var content = $('.editor').html();
    $("#txtarea").text(content);
});
});

Answer 1

[0xD34F]

$(document).on('input', '.editor', function() {
  const content = $('.editor')
    .get()
    .map(n => `\n  <li>${$(n).html()}</li>`)
    .join('');

  $('textarea').val(`<ul>${content}\n</ul>`);
});

Comments

[Дмитрий]

Большое спасибо!

[Дмитрий]

Спасибо Вам большое за помощь!
Все прекрасно работает! Помогите, пожалуйста, с выводом информации в каждый свой div.
Допустим у нас есть несколько div куда мы пишем инфу:

<div class="editor" contenteditable="true">
Текст 1
</div>
<div class="editor" contenteditable="true">
Текст 2
</div>
<div class="editor" contenteditable="true">
Текст 2
</div>
<div class="editor" contenteditable="true">
Текст 4
</div>

В итоге инфа из полей попадает в textarea тоже по порядку завернута в тег LI:

<textarea id="txtarea" rows="10" cols="45" name="text">
<ul>
  <li>Текст 1</li>
  <li>Текст 2</li>
  <li>Текст 3</li>
  <li>Текст 4</li>
  <li><br></li>
</ul>
</textarea>

Но когда нужно отредактировать новость, поля для ввода пустые, информация есть только в textare.
Хотелось бы чтобы информация возвращалась и в те поля, через которые была изначально добавлена, для комфортного редактирования новости.
Заранее огромное Вам спасибо!

Спасибо заранее за помощь!!!

Answer 2

[Михаил]

.each()
https://jquery-docs.ru/each/