Using Quill Editor on a form input in Django.

Question

I want to use Quill Editor on a form input in Django.

From the examples in Quill playground I see that always the container is a div.

How can I make it work with a <textarea> instead of a div, and the text to remain in textarea, to work when I submit the form by Django;

I know there is a django-quill package, but lastest commit was done in 2015, and is reported not working with new Django versions, beside I want to do it more custom.

score 2 · Accepted Answer · answered May 21 '18 at 14:55

Quill is working inside a contenteditable div. If you want to make it "look like" a textarea this should be easy using css.

But if you're using Quill, this might be to use rich text, like bold, italic, bullets... And that rich content cannot live inside a textarea that just handles plain text (no text-formatting). That's why its has to stay inside a contenteditabe div.

Your form should, on submit, look for this div content and send it to your backend (either in pure js, or by copy-pasting the html content inside a hidden textarea this time) in html format.

score 0 · Answer 2 · answered May 13 '23 at 18:51

This is based on https://stackoverflow.com/a/65096360. It uses Bootstrap 5 classes to make the div look like a textarea.

<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>

I hide the original textarea container created by post_form with CSS: #div_id_body {display: none}. body is the name from the model. Your name might be different.

Using Quill Editor on a form input in Django.

2 Answers2