我正在使用 ASP.Net Core 表单通过代码将数据从用户传递到服务器:
@model SomeModel
@using(Html.BeginForm(...))
{
@Html.TextBoxFor(s => s.PropertyName);
}
工作正常,但现在我有需要从羽毛笔编辑器填充的字段。 Quill 要求我将
div
容器传递给他,以完成他的工作,但我不知道如何将该容器绑定到我的模型属性。我尝试将 div id
和 name
作为属性名称,但它不起作用。还尝试添加 runat = server
但仍然不起作用。
这是我的完整代码:
@model ClanakModel
@{
ViewData["Title"] = "New story";
}
<style>
#Naslov {
width: 80%;
margin-bottom: 20px;
}
#GrupaID {
height: 30px;
width: 18%;
margin-left: 2%;
}
input {
border: 1px solid gray;
background-color: whitesmoke;
padding: 5px;
border-radius: 20px 20px 20px 20px;
}
#Tekst {
width: 100%;
max-width: 100%;
min-width: 100%;
}
#Publish_btn {
float: right;
border: 2px solid black;
background-color: white;
margin-top: 20px;
border-radius: 20px;
padding: 5px 15px 5px 15px;
}
#Publish_btn:hover {
background-color: deepskyblue;
}
</style>
<h2>Write new story</h2>
@using (Html.BeginForm("CreateNew", "Story", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.TextBoxFor(c => c.Naslov, new { @placeholder = "Title" });
@Html.DropDownListFor(c => c.GrupaID, new SelectList(GrupaModel.List(), "GrupaID", "Naziv"));
<div id="Tekst" name="Tekst"></div>
<button id="Publish_btn">Publish</button>
}
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['image'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'] // remove formatting button
];
var options = {
theme: 'snow',
placeholder: 'Start writing here!',
modules: {
toolbar: toolbarOptions
}
};
var quill = new Quill('#Tekst', options);
</script>
由于 DIV 不是输入元素,因此您可以添加一个
hidden
输入,在提交表单时接受编辑器的内容。您可以使用 quill.getContents()
在 js 中获取编辑器内容。
假设您的模型有一个
Description
字段,下面是一个简单的演示:
@model SomeModel
<h2>Write new story</h2>
<form id="form" method="post">
<input asp-for="Description" name="Description" type="hidden" class="form-control" />
<div id="Tekst" name="Tekst"></div>
<input type="submit" id="Publish_btn" value="Publish" />
</form>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['image'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'] // remove formatting button
];
var options = {
theme: 'snow',
placeholder: 'Start writing here!',
modules: {
toolbar: toolbarOptions
}
};
var quill = new Quill('#Tekst', options);
var form = document.querySelector('form');
form.onsubmit = function () {
// Populate hidden form on submit
var description = document.querySelector('input[name=Description]');
description.value = quill.getContents();
};
</script>
Quill 内容由 Deltas 格式 描述。此格式是 JSON 的子集,非常适合许多应用程序。如果您需要获取原始 HTML 内容,JavaScript 最简单的选择是:
var html = quill.root.innerHTML;
假设您的模型有一个
Comment
字段,您修改后的代码将是:
@model ClanakModel
@{
ViewData["Title"] = "New story";
}
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<h2>Write new story</h2>
@using (Html.BeginForm("CreateNew", "Story", FormMethod.Post, new { id="form", enctype = "multipart/form-data" }))
{
@Html.TextBoxFor(c => c.Naslov, new { placeholder = "Title" });
@Html.DropDownListFor(c => c.GrupaID, new SelectList(GrupaModel.List(), "GrupaID", "Naziv"));
<!-- Hidden input to accept the contents of Quill -->
@Html.HiddenFor(c => c.Comment, new { @class = "form-control" })
<!-- Quill editor -->
<div class="form-control">
<div class="comment-toolbar">
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
</span>
</div>
<div class="comment-editor">
</div>
</div>
<!-- /Quill editor -->
<button type="submit" id="Publish_btn">Publish</button>
}
<script>
var commentEditor = document.querySelector('.comment-editor');
if (commentEditor) {
var quill = new Quill(commentEditor, {
modules: {
toolbar: '.comment-toolbar'
},
placeholder: 'Leave a comment',
theme: 'snow'
});
quill.on('text-change', function (delta, source) {
updateComment();
})
// You will get the raw HTML without Quill classes.
function getQuillHtml() { return quill.root.innerHTML; }
function updateComment() {
let html = getQuillHtml();
// Copy HTML content into hidden input
document.querySelector('#Comment').value = html;
}
}
</script>
当您在编辑器中修改内容时,这将复制 HTML 内容。如果您需要发布 HTML 内容,您可以在单击提交按钮时在 Quill 编辑器中复制 HTML 内容。为此,请在
script
部分包含以下内容:
var form = document.querySelector('#form');
form.onsubmit = function () {
updateComment();
};
但是,如果您将内容存储在数据库中,我建议以 Deltas 格式 存储,以保持与 Quill 编辑器的兼容性。