How do I store a DIV value? (Quill)

Question

Problem: When I add text to the DIV (Quill TextEditor) and hit the save button, I notice that the text isn't saved in the database. The DIV is supposed to hold the value for my Model's Description property.

How can I solve this?

View:

<div class="form-group">
    <label asp-for="Description" class="control-label"></label>
    <div id="editor-container" asp-for="Description" class="form-control"></div>
    <span asp-validation-for="Description" class="text-danger"></span>
    <script>
        var quill = new Quill('#editor-container', {
            modules: {
                toolbar: [
                    [{ header: [1, 2, false] }],
                    ['bold', 'italic', 'underline'],
                    ['image', 'code-block']
                ]
            },
            placeholder: 'Compose an epic...',
            theme: 'snow'  // or 'bubble'
        });
    </script>
</div>

divs are not input elements. They are for display / page structure. The contents of a div do not get posted back when you submit a form. Does this Quill plugin create a textarea or something you can read from? It probably needs to have a "name" attribute matching a name in your model. Right now I think you're giving that attribute to the div (using the asp-for), which won't have any effect. Check the plugin's documentation to see how it captures data and how you can use it in a form — ADyson, Mar 28 '18 at 12:47
Yes but perhaps it creates one in the background to use as the input surface? JS can create elements dynamically, as I'm sure you know. Or perhaps it provides another method by which you can retrieve the content for posting back. You cannot be the first person to want to do this, and I'm sure the creators will have thought of it. After all what would be the point of inputting data via the plugin, if it could not be saved? Is there no documentation or 3rd party resources relating to this subject? — ADyson, Mar 28 '18 at 12:52
https://stackoverflow.com/questions/44467204/how-do-i-post-contents-of-a-quill-editor-in-a-form — ADyson, Mar 28 '18 at 12:55
Possible duplicate of [How do I post contents of a Quill editor in a form?](https://stackoverflow.com/questions/44467204/how-do-i-post-contents-of-a-quill-editor-in-a-form) — phuzi, Mar 28 '18 at 13:09

Tassisto · Accepted Answer · 2018-03-29T04:21:13.070

Since DIV's are not input elements I added an INPUT element and made it hidden type="hidden". Through JavaScript I populated the INPUT element with Quilljs Editor value when the user hits the Submit button.

This is how I solved it.

<div class="form-group">
    <label asp-for="Description" class="control-label"></label>
    <input asp-for="Description" name="Description" type="hidden" class="form-control" />
    <div id="editor-container" name="editor-container"></div>
    <span asp-validation-for="Description" class="text-danger"></span>
    <script>
        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 description = document.querySelector('input[name=Description]');
            description.value = JSON.stringify(quill.getContents());

            console.log("Submitted", $(form).serialize(), $(form).serializeArray());
        };
    </script>
</div>

score 1 · Answer 2 · answered Aug 18 '22 at 09:11

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

If you want to get only the content, you can add .ql-editor to your selector : $("#hiddenArea").val($("#quillArea .ql-editor").html());

How do I store a DIV value? (Quill)

2 Answers2