动态地将值（例如：innerHTML）传递给另一个元素作为值

Question

我有一个包含三个字段的表单，它们通过 jinja2 模板呈现，并且这些字段是 Django ModelForm强>。这些字段是：CharField、FileField 和 Textarea。

而且，我还有一个类似 <div> 的 textarea 元素，它的工作原理与 Stackoverflow 的 编辑器完全一样，省略了一些选项，例如 <code>, <image> ...

但是，它完全基于 JavaScript。当在页面上呈现时，禁用从 ModelForm 呈现的现有 TextArea。如，我在页面上定义...

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

我已经提到两个元素的 ID 相同，总是通过覆盖第一个来呈现第二个文本区域。并且，通过 - display: none 隐藏该元素。

为了将第二个创建的 textarea 的上下文传递给那个 modelform textarea，我使用了：

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

通过查看浏览器控制台，我可以看到 keyup 正在工作，但上下文或第一个元素不受影响。而且，由于它是必需的元素，我也无法提交表单。

例如，我想在提交表单之前将该 html 上下文作为字符串传递给 ModelForm 的 textarea 元素：

$('#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);
});

访问jsfiddle，了解更多信息。

检查 jsfiddle 上的网络，它正在提交所需的数据。