如何在Django表单的textarea中使用Quill Editor并兼容表单提交

我完全理解你的需求——不想依赖过时的django-quill，还要自定义Quill的同时让内容能通过Django表单正常提交。其实核心思路是保留Django原生的textarea（用于表单提交），把Quill绑定到一个独立的div容器，然后双向同步内容。下面是具体实现步骤：

1. 定义Django表单 #

首先在你的表单里保留对应的TextField，并把textarea设置为隐藏（因为用户实际操作的是Quill编辑器）：

# forms.py
from django import forms

class PostForm(forms.Form):
    # 这里用Textarea widget，添加id用于后续JS操作，同时隐藏它
    content = forms.CharField(
        widget=forms.Textarea(attrs={
            'id': 'id_content',
            'style': 'display: none;'
        })
    )

如果是ModelForm，写法类似：

from django import forms
from .models import Post

class PostModelForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ['content']
        widgets = {
            'content': forms.Textarea(attrs={
                'id': 'id_content',
                'style': 'display: none;'
            })
        }

2. 模板中渲染表单并初始化Quill #

在模板里，我们需要：

• 渲染隐藏的textarea
• 添加Quill的容器div
• 初始化Quill并同步内容

<!-- template.html -->
<form method="post">
    {% csrf_token %}
    <!-- Quill编辑器的可视化容器 -->
    <div id="quill-editor" style="height: 300px;"></div>
    <!-- Django原生的textarea（隐藏） -->
    {{ form.content }}
    <button type="submit" class="btn btn-primary">提交内容</button>
</form>

<!-- 引入Quill的CSS和JS（你可以下载到本地或者用CDN） -->
<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>
    // 初始化Quill编辑器，这里可以自定义工具栏、主题等配置
    const quill = new Quill('#quill-editor', {
        theme: 'snow',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{ 'header': [1, 2, 3, false] }],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'color': [] }, { 'background': [] }],
                ['link', 'image'],
                ['clean']
            ]
        }
    });

    // 获取隐藏的textarea元素
    const contentTextarea = document.getElementById('id_content');

    // 回显已有内容（比如编辑页面时，把textarea的值加载到Quill）
    if (contentTextarea.value) {
        quill.root.innerHTML = contentTextarea.value;
    }

    // 实时同步Quill内容到textarea，确保表单提交时能拿到最新值
    quill.on('text-change', () => {
        // 如果需要纯文本，用quill.getText()代替innerHTML
        contentTextarea.value = quill.root.innerHTML;
    });

    // 也可以选择在表单提交前再同步（减少DOM操作，适合内容较多的场景）
    // document.querySelector('form').addEventListener('submit', () => {
    //     contentTextarea.value = quill.root.innerHTML;
    // });
</script>

3. 后端处理与内容显示 #

保存内容 #

表单提交后，Django会像处理普通textarea一样获取content字段的值（也就是Quill生成的HTML），直接保存即可。如果担心XSS攻击，建议用bleach库清理HTML内容：

# 先安装bleach：pip install bleach
import bleach
from django.db import models

class Post(models.Model):
    content = models.TextField()

    def save(self, *args, **kwargs):
        # 定义允许的HTML标签和属性，过滤危险内容
        allowed_tags = [
            'p', 'b', 'i', 'u', 'em', 'strong', 'blockquote', 
            'code', 'ul', 'ol', 'li', 'a', 'img', 'h1', 'h2', 'h3'
        ]
        allowed_attributes = {
            'a': ['href', 'title'],
            'img': ['src', 'alt']
        }
        self.content = bleach.clean(
            self.content,
            tags=allowed_tags,
            attributes=allowed_attributes
        )
        super().save(*args, **kwargs)

显示内容 #

在模板中显示保存的HTML内容时，需要用|safe过滤器告诉Django这是可信的HTML：

<div class="post-content">
    {{ post.content|safe }}
</div>

自定义扩展 #

这种方式完全不依赖第三方Django包，你可以自由定制Quill的任何功能：

• 修改工具栏按钮、添加自定义按钮
• 更换Quill主题（比如bubble主题）
• 集成图片上传（自己写后端接口，替换Quill默认的图片上传逻辑）
• 添加自定义格式、模块等

这样既满足了Django表单提交的要求，又能完全掌控Quill的自定义效果，比旧的django-quill包灵活太多。

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