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:

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:

    <p>Hello World!</p>
    <p>Some initial <strong>bold</strong> text</p>
    <p><br></p>

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 = $('
').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 = $('
').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.