如何在Django表单提交时保存Quill编辑器的div内容

因为Quill编辑器的容器是普通<div>，不属于表单控件，默认不会被包含在POST数据里，你可以通过隐藏表单字段来传递编辑器内容，具体步骤如下：

1. 修改HTML，添加隐藏字段 #

在你的<form>标签内部添加一个隐藏的<input>，用来存储Quill的内容：

<form method="POST" action="{% url 'your_django_view_name' %}">
    {% csrf_token %}
    <!-- 原Quill编辑器容器 -->
    <div id="editor">
        <p>Hello World!</p>
        <p>Some initial <strong>bold</strong> text</p>
        <p><br></p>
    </div>
    <!-- 新增隐藏字段 -->
    <input type="hidden" name="quill_content" id="quill_content">
    <button type="submit">提交</button>
</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>

2. 同步Quill内容到隐藏字段 #

有两种同步方式可选：

方式一：表单提交前同步 #

在初始化Quill的脚本中，监听表单提交事件，把编辑器的HTML内容赋值给隐藏字段：

var quill = new Quill('#editor', {
    theme: 'snow'
});

// 获取表单元素
const form = document.querySelector('form');
// 监听提交事件
form.addEventListener('submit', function(e) {
    // 获取Quill的HTML内容
    const quillHtml = quill.root.innerHTML;
    // 赋值给隐藏字段
    document.getElementById('quill_content').value = quillHtml;
});

方式二：实时同步（可选） #

如果需要实时同步编辑器内容到隐藏字段，可监听Quill的text-change事件：

var quill = new Quill('#editor', {
    theme: 'snow'
});

quill.on('text-change', function() {
    const quillHtml = quill.root.innerHTML;
    document.getElementById('quill_content').value = quillHtml;
});

3. Django后端接收内容 #

在视图函数中，直接从POST数据中提取quill_content的值即可：

from django.shortcuts import render, redirect

def your_view(request):
    if request.method == 'POST':
        # 获取编辑器内容
        quill_content = request.POST.get('quill_content', '')
        # 这里可将内容保存到数据库，例如：
        # YourModel.objects.create(content=quill_content)
        return redirect('success_page')
    return render(request, 'your_template.html')

注意事项 #

• 若需存储纯文本而非HTML，可替换quill.root.innerHTML为quill.getText()
• Django模板中必须添加{% csrf_token %}，避免跨站请求伪造错误

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