jquery detect change inside div get the html and set to value of input

Question

i am using Quilljs, as a rich text editor.

$(document).ready(function () {
    //get content of quillEdit and insert into hidden input field.
    $(".ql-editor").on('change', function() {
        var content = $(this).html();
        $("#QuillEdit").val(content);
        console.log(content);
    });
});
<form>
   <input type="text" name="quillEdit" id="QuillEdit" class="hidden-input" value="" />
</form>
<div id="quillEditor">
    <div id="toolbar"></div>
</div>

In the above, quill creates the editor inside #quillEditor. in that, it creates a div with a class of ql-editor.

inside that div, all content (p tags etc) is created.

I am trying to, when ever a change happens inside ql-editor, then i want to dump that html into my input "QuillEdit" as its value..

but absolutely nothing is happening...

been drawing a blank with this so far. Any idea how to get it to work ?

Answer 1

found the solution, quilljs has a textchange event, i can check on.

so my solution looks like this:

quill.on('text-change', function (delta, oldDelta, source) {
    var content = $(".ql-editor").html();
    $("#QuillEdit").val(content);
});