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

Posted 2023-02-24

【中文标题】动态地将值（例如：innerHTML）传递给另一个元素作为值

【英文标题】：passing the values dynamically (eg: innerHTML) to another element as a value

【发布时间】：2019-08-08 19:15:32

【问题描述】：

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

而且，我还有一个类似 <div> 的 textarea 元素，它的工作原理与 *** 的 编辑器完全一样，省略了一些选项，例如 <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>

【问题讨论】：

您可以阻止提交，然后您可以将文本区域中的值分配给基于模型的文本区域您正在使用哪个 TxtEdtr（js 插件）？

【参考方案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 上的网络，它正在提交所需的数据。

【讨论】：

不适合我... Quill editor 继承了我已经在我的编辑器上实现的它自己的功能；然而，它没有提交表单，因为标志 required=true。我的实际问题没有解决。无论如何，谢谢！

得到了一些不同的解决方案.. 所以，需要 Quill。谢谢你的主意！