динамическая передача значений (например, innerHTML) другому элементу в качестве значения

Question

У меня есть форма с тремя полями, которые отображаются с помощью шаблона jinja2 и поля являются частью Django ModelForm . Поля: CharField, FileField и Textarea .

И у меня также есть элемент textarea , такой как <div>, который работает точно так же, как редактор Stackoverflow, пропуская некоторые опции, такие как <code>, <image> ...

Но он полностью основан на JavaScript. Который при отображении на странице отключает существующую TextArea, отображаемую из ModelForm. Как я определил на странице ...

<script>
    $(document).ready(function () {
        $('#txtArea').TxtEdtr();
    });
</script>

Я упомянул оба идентификатора элемента, чтобы всегда отображать вторую текстовую область, переопределяя первую. И, скрывая этот элемент с помощью - display: none.

И чтобы передать контекст 2-й созданной текстовой области этой текстовой области модели, я использовал:

$('.myeditor').keyup(function () {
    $('#txtArea').innerHTML = $('.myeditor').html();
});

Глядя на консоль браузера, я вижу, что keyup работает, но контекст или 1-й элемент не затрагиваются. И, поскольку это обязательный элемент, я также не могу отправить форму.

Например, я хочу передать этот HTML-контекст в виде строки в элемент textarea ModelForm перед отправкой формы:

$('#txtEditor').innerHTML = $('.editor').html();
result to pass: "<span style=\"font-style: italic;\">hi there ...<br></span>"

, который отображается на консоли, пока я запускаю этот код, но не могу передать.

Структура DOM:

<div class="form-group">

<!-- model form element -->
<label for="txtEditor">Body of article</label>
<textarea name="details" cols="40" rows="10"
    id="txtEditor" class="form-control" required="" style="display: none;">
</textarea>

<!-- after rendering -->
<div class="row-fluid main ted">
    <div id="menubar_txtEditor" class="row-fluid menu-bar">
        <!-- menubuttons are displayed here -->
        ...
        ...
    </div>
    <div class="editor" name="details" style="overflow: auto;" contenteditable="true">
        <!-- portions here dynamically added if textarea has
             any content inside -->
        <span style="font-style: italic;">hi there ...<br></span>
    </div>
</div>

Answer 1

Вы можете сделать что-то вроде этого:

// add data to the editor
$('.editor').prepend($('#txtEditor').val());
// initialize TxtEdtr
window.quill = new Quill('.editor', {
  theme: 'snow'
});
// Update the model textarea value after submit
$('form').on('submit', function() {
  $('#txtEditor').val(quill.root.innerHTML);
});

Vist jsfiddle , для более.

проверить сеть на jsfiddle, она отправляет нужные данные.