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?

Binar Web · Answer 1 · 2019-07-18T08:51:56.737

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.

The updating of the hidden textarea does not work anymore as the behaviour of `getContents()` changed (returns Delta object instead of HTML). A workaround is to use `quill.root.innerHTML` instead of `quill.getContents()`. See https://github.com/quilljs/quill/issues/903 — Martin M., Apr 01 '21 at 15:05

score 8 · Accepted Answer · answered Nov 04 '16 at 22:47

8

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.

answered Nov 04 '16 at 22:47

Ben Browitt

1,772
8
10

13

Thanks for the answer but that hack is nothing short of insane... Back to Summernote I guess! – voodoo-burger Nov 04 '16 at 23:26

score 8 · Answer 3 · answered Dec 01 '20 at 18:27

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>

score 2 · Answer 4 · answered Feb 21 '21 at 00:17

2

Add this in module to work

['link']

Here is working perfectly.

answered Feb 21 '21 at 00:17

Lucas William

21
1

score 1 · Answer 5 · answered Jul 05 '17 at 12:10

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

QuillJS doesn't work with textarea

5 Answers5

Linked