如何存储Quill编辑器DIV的值？解决内容无法存入数据库问题

这个问题我做项目时也踩过同款坑，核心原因很直白：你用来承载Quill的是个<div>，而HTML表单默认只会提交**标准表单控件（input、textarea、select等）**的值，这个div的内容根本不会被打包进请求传给后端，所以你的Model的Description属性自然是空的。

下面是一步步的解决办法：

1. 添加隐藏的表单控件绑定Description #

在Quill编辑器的容器div下方，加一个隐藏的<input>（或textarea），专门用来和Model的Description属性绑定。表单提交时，这个控件的值会自动传给后端。

修改后的视图代码片段：

<div class="form-group">
    <label asp-for="Description" class="control-label"></label>
    <!-- 保留Quill编辑器容器，去掉没用的asp-for -->
    <div id="editor-container" class="form-control"></div>
    <!-- 新增隐藏input，绑定Description -->
    <input type="hidden" asp-for="Description" id="hidden-description" />
    <span asp-validation-for="Description" class="text-danger"></span>
</div>

注意：原来div上的asp-for="Description"可以删掉了，因为div不是表单控件，这个属性在这里起不到任何绑定作用，反而容易混淆。

2. 同步Quill编辑器和隐藏控件的内容 #

接下来用JavaScript做两件关键的事：

• 页面加载时，把Model中已有的Description值加载到Quill编辑器里
• 编辑器内容变化时，实时把内容同步到隐藏input中

假设你已经正确引入了Quill的JS和CSS，添加这段脚本：

// 初始化Quill编辑器（主题可根据需求修改）
var quill = new Quill('#editor-container', {
    theme: 'snow'
});

// 页面初始化：把隐藏input的内容（即Model的Description）加载到编辑器
var initialContent = document.getElementById('hidden-description').value;
if (initialContent) {
    quill.root.innerHTML = initialContent;
}

// 监听编辑器内容变化，实时同步到隐藏input
quill.on('text-change', function() {
    // 如果需要纯文本内容，就用quill.getText()代替innerHTML
    document.getElementById('hidden-description').value = quill.root.innerHTML;
});

3. 后端验证（确保接收正常） #

最后确认你的后端Action方法能正确接收Model的Description值，比如：

[HttpPost]
public async Task<IActionResult> SaveYourEntity(YourEntityViewModel model)
{
    if (!ModelState.IsValid)
    {
        return View(model);
    }

    // 直接使用model.Description保存到数据库即可
    var entity = new YourEntity
    {
        Description = model.Description,
        // 其他属性...
    };

    _context.YourEntities.Add(entity);
    await _context.SaveChangesAsync();

    return RedirectToAction(nameof(Index));
}

额外注意事项 #

• 如果你的应用需要防范XSS攻击，建议对保存的HTML内容进行 sanitize（比如用HtmlSanitizer库），避免恶意脚本被存储和渲染。
• 如果只需要纯文本内容，把同步代码里的quill.root.innerHTML改成quill.getText()即可。

内容的提问来源于stack exchange，提问作者Tassisto