djangodjango-templatesquill

QuillJS doesn't work with textarea

I am trying to use QuillJS on a specific form field in my Django 1.10 template as follows:

<link href="https://cdn.quilljs.com/1.1.3/quill.snow.css" rel="stylesheet">

<script src="https://cdn.quilljs.com/1.1.3/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#id_text', {
    theme: 'snow'
  });
</script>

The problem is that Django renders the form field I want to use Quill on as a textarea instead of a div, and Quill doesn't seem to work on it: any effects applied to text don't register either visually or in the resulting output, and when I try to edit an existing record the initial text doesn't show up in the editor, even though it is there in the source HTML between the textarea tags.

Is it a known issue that Quill doesn't work with textarea or is there something else that could be wrong?

Solution

  • You can use Quill with a div and sync the editor's content(Delta) with a hidden input field in the form.

    There is a Quill Form Submit example.