QuillJS doesn't work with textarea

Question

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?

Answer 1

The following example works with jQuery, but it can be easily changed to run in plain javascript.

Step 1:
Add a class to your textarea, for example quill-editor:

<textarea name="input" placeholder="Textarea" class="form-control quill-editor">
    <p>Hello World!</p>
    <p>Some initial <strong>bold</strong> text</p>
    <p><br></p>
</textarea>

Step 2:

Add this javascript code after the textarea field:

$('.quill-editor').each(function(i, el) {
    var el = $(this), id = 'quilleditor-' + i, val = el.val(), editor_height = 200;
    var div = $('<div/>').attr('id', id).css('height', editor_height + 'px').html(val);
    el.addClass('d-none');
    el.parent().append(div);

    var quill = new Quill('#' + id, {
        modules: { toolbar: true },
        theme: 'snow'
    });
    quill.on('text-change', function() {
        el.html(quill.getContents());
    });
});

It will allow you to add as many editors as you like and it will update its coresponding textarea. No other code is required.

How it works:

$('.quill-editor').each(function(i, el) {
//...
});

for every quill-editor class it finds,

var el = $(this), id = 'quilleditor-' + i, val = el.val(), editor_height = 200;
var div = $('<div/>').attr('id', id).css('height', editor_height + 'px').html(val);
el.hide();
el.parent().append(div);

it will create a div after the textarea field with a unique id and a fixed height, which will be used by the quill editor instance. the original textarea will get hidden.

var quill = new Quill('#' + id, {
    modules: { toolbar: true },
    theme: 'snow'
});

a new Quill instance is started,

quill.on('text-change', function() {
    el.html(quill.getContents());
});

when its content will be changed, the textarea field will get updated.