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:

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

Answer 2

The easy way:

<div id="quill_editor"></div>
<input type="hidden" id="quill_html" name="name"></input>

<script>
    var quill = new Quill('#quill_editor', {
            theme: 'snow'
    });
   quill.on('text-change', function(delta, oldDelta, source) {
        document.getElementById("quill_html").value = quill.root.innerHTML;
    });
</script>

Answer 3

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.

Answer 4

Try below code to get form data.

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      ['bold', 'italic'],
      ['link', 'blockquote', 'code-block', 'image'],
      [{ list: 'ordered' }, { list: 'bullet' }]
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'
});
var form = document.querySelector('form');
form.onsubmit = function() {
  // Populate hidden form on submit
  var about = document.querySelector('input[name=about]');
  about.value = JSON.stringify(quill.getContents());

  console.log("Submitted", $(form).serialize(), $(form).serializeArray());

alert('Open the console to see the submit data!')
  return false;
};