如何存储 DIV 值？ （鹅毛笔）

Question

问题： 当我向 DIV (Quill TextEditor) 添加文本并点击保存按钮时，我注意到文本没有保存在数据库中。 DIV 应该保存我模型描述的值 属性。

我该如何解决这个问题？

查看：

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

Answer 1

由于 DIV 不是输入元素，我添加了一个 INPUT 元素并将其隐藏 type="hidden"。通过 JavaScript 当用户点击提交按钮时，我用 Quilljs 编辑器值填充了 INPUT 元素。

我就是这样解决的。

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