How do I post contents of a Quill editor in a form?

A solution I came up with was to make a wrapper class.

class QuillWrapper {

    /**
     * @param targetDivId { string } The id of the div the editor will be in.
     * @param targetInputId { string } The id of the hidden input
     * @param quillOptions { any } The options for quill
     */
    constructor(targetDivId, targetInputId, quillOptions) {

        //Validate target div existence
        this.targetDiv = document.getElementById(targetDivId);
        if (!this.targetDiv) throw "Target div id was invalid";

        //Validate target input existence
        this.targetInput = document.getElementById(targetInputId);
        if (!this.targetInput) throw "Target input id was invalid";

        //Init Quill
        this.quill = new Quill("#" + targetDivId, quillOptions);

        //Bind the two containers together by listening to the on-change event
        this.quill.on('text-change',
            () => {
                this.targetInput.value = this.targetDiv.children[0].innerHTML;
            });
    }
}

Simply include the class somewhere on your page and then use the following to initilize it:

    let scopeEditor = new QuillWrapper("ScopeEditor", "Scope", { theme: "snow" });

Your html would look roughly like this:

<div class="form-group">
     <label asp-for="Scope" class="control-label col-md-2"></label>  
     <div id="ScopeEditor"></div>
     <input type="hidden" asp-for="Scope" class="form-control" />
</div>

You can check related discussion about it https://github.com/quilljs/quill/issues/87

While this is not an ideal solution :

var myEditor = document.querySelector('#editor')
var html = myEditor.children[0].innerHTML

<form method="post" id="identifier">

  <div id="quillArea"></div>

  <textarea name="text" style="display:none" id="hiddenArea"></textarea>
  <input type="submit" value="Save" />

</form>

If you give the form an identifier, then using jQuery you can do the following:

var quill = new Quill ({...}) //definition of the quill

$("#identifier").on("submit",function() {
  $("#hiddenArea").val($("#quillArea").html());
})

Instead of the HTML you could use quill.getContents() to get the delta.

Here's the code I used to do this:

$(document).ready(function(){
  $("#theform").on("submit", function () {
    var hvalue = $('.ql-editor').html();
    $(this).append("<textarea name='content' style='display:none'>"+hvalue+"</textarea>");
   });
});

Basically, what it does is to add a hidden textarea to your form and copy the content of the "ql-editor" container (This is automatically made by Quill Editor in the container div) to it. The textarea will then be submitted with the form. You need to change the IDs used in the code to the id of your container tags.