<form method="post">
{% csrf_token %}
{{post_form|crispy}}
<label for="quill_editor" class="form-label requiredField">
Body<span class="asteriskField">*</span>
</label>
<div id="quill_editor" class="textarea form-control"></div>
<button type="submit" class="btn btn-primary mt-2">
Submit
</button>
</form>
{% load static %}
<script src="{% static 'js/vendor/quill.1.3.7.min.js' %}"></script>
<script>
const quill = new Quill('#quill_editor', {theme: 'snow'});
const bodyField = document.getElementById('id_body');
// Update the body input field as it changes. I tried to do this on form submit, but the browser's input validation runs before the form is submitted. If there's no value in there, input validation fails.
quill.on('text-change', () => {
bodyField.value = quill.root.innerHTML;
});
</script>
2条答案
按热度按时间jvlzgdj91#
Quill正在contenteditable div中工作。如果你想让它“看起来像”一个文本区域,使用css应该很容易。
但如果你使用的是Quill,这可能是使用富文本,如粗体、斜体、项目符号……而丰富的内容不能存在于只处理纯文本(没有文本格式)的
textarea
中。这就是为什么它必须留在contenteditabediv
中。你的表单应该在提交时,寻找这个div内容,并以html格式将其发送到你的后端(要么用纯js,要么这次将html内容复制粘贴到一个隐藏的文本区域中)。
y1aodyip2#
这是基于https://stackoverflow.com/a/65096360。它使用Bootstrap 5类来使div看起来像一个文本区域。
我用CSS隐藏了
post_form
创建的原始textarea容器:#div_id_body {display: none}
。body
是模型中的名称。你的名字可能不一样。