javascript - 动态传递值(例如 : innerHTML) to another element as a value

Question

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

而且，我还有一个textarea，比如<div>与 Stackoverflow 的 编辑器完全一样的元素，省略了一些选项，如 <code>, <image> ...

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

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

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

为了将第二个创建的文本区域的上下文传递给该模型文本区域，我使用了:

$('.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 , 了解更多。

check network on jsfiddle, it's submitting the desired data.