Quill: Editor for the textarea

[Purus]

I am developing a plugin for a CMS to use the QuillJs editor. The CMS expects the editor toolbar to be attached to a textarea and later the contents are submitted via the form.

I don't see any examples where the editor is linked to the textarea. Any help?

I could not find any helpful link in the search.

[benbro]

Form submit example

[Purus]

Thanks for your response.

I have already seen this example. But the example does not deal with
textarea element in the form.

Thanks,
R.Purusothaman

On Tue, Jan 3, 2017 at 10:48 PM, benbro [e-mail] wrote:

Form submit example http://quilljs.com/playground/#form-submit

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/quilljs/quill/issues/1231#issuecomment-270168527, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABBx56wN3ObFGT0luBScfeYlwYFtwp3iks5rOoLmgaJpZM4LZzn4
.

[benbro]

Quill doesn't work directly with textarea.
The example show you how to get the delta contents from Quill and add it to a form field.

[benbro]

See previous discussion https://github.com/quilljs/quill/issues/87

[gowda1991]

Quill doesn't work directly with textarea, any one help me on this.

[be-next-hotdog]

+1

[CrandellWS]

https://github.com/quilljs/quill/issues/1694#issuecomment-328634796

Quill works with a div, not textarea.
This example show how to sync the editor with a form field.

[trickymast3r]

this is the reason why i not use this editor

[windware-ono]

What is its primary use when it doesn't directly work with textarea?

[yujialian]

It's a bit work especially we originally using ckeditor which perfectly support textarea, quill has a nice looking but it would be perfect if we have getHTML() and add support to <textarea>

Update: I did it anyways, add div and keep the input as hidden since I need update the field dynamically

[augnustin]

Yup, and this shouldn't be too hard:

Simply transform the textarea into the div with content at initialization and live update a hidden field with the same name while editing.

[tangien]

Checkout this,

https://github.com/tangien/quilljs-textarea

I thought it might be helpful!

[vince83110]

10 minutes lost, what is the point of a rich text editor to not work easily with a textarea input... It's like "hey, now you wrote your text, you would like to save or submit it ?! not with our plugin !"

[dennercpt]

Simple solution

function form_submit(){
$('#content').val($('.ql-editor').html()); #content is the hidden input that will receive the text
$('#form').submit();
}

[philippejadin]

It would be nice to warn the developer on the console when attempting to instantiate quill on a textarea. Instead I got a very weird error involving "Obsolete mutation events"

[LipeTuga]

This solved my problems:

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