Как сохранить значение DIV? (Перо)
Проблема: Когда я добавляю текст в DIV (Quill TextEditor) и нажимаю кнопку «Сохранить», я замечаю, что текст не сохраняется в базе данных. Предполагается, что DIV будет содержать значение свойства Description моей модели.
Как я могу это решить?
Вид:
<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>
Проблема в том, что QuillJS не поддерживает теги <input>
Да, но, возможно, он создает его в фоновом режиме для использования в качестве поверхности ввода? Я уверен, что вы знаете, что JS может создавать элементы динамически. Или, возможно, он предоставляет другой метод, с помощью которого вы можете получить контент для обратной публикации. Вы не можете быть первым, кто захочет это сделать, и я уверен, что создатели это подумали. В конце концов, какой смысл вводить данные через плагин, если их нельзя было сохранить? Нет ли документации или сторонних ресурсов по этой теме?
Возможный дубликат Как опубликовать содержимое редактора Quill в форме?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Поскольку DIV не являются элементами ввода, я добавил элемент INPUT и сделал его скрытым type = "hidden". С помощью JavaScript я заполнил элемент INPUT значением Quilljs Editor, когда пользователь нажимает кнопку «Отправить».
Вот как я это решил.
<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.info("Submitted", $(form).serialize(), $(form).serializeArray());
};
</script>
</div>
div не являются элементами ввода. Они предназначены для отображения / структуры страницы. Содержимое div не отправляется обратно при отправке формы. Этот плагин Quill создает текстовое поле или что-то, из чего вы можете читать? Вероятно, он должен иметь атрибут «name», соответствующий имени в вашей модели. Прямо сейчас я думаю, что вы даете этот атрибут div (используя asp-for), что не будет иметь никакого эффекта. Ознакомьтесь с документацией плагина, чтобы узнать, как он собирает данные и как вы можете использовать их в форме.