如何将Django crispy form布局与Quill JS结合并为描述字段添加safe过滤器

解决方案 #

你遇到的是Django默认自动转义HTML标签的问题，QuillField生成的富文本内容带HTML标签，被转义后就无法正常渲染为富文本效果，可通过以下两种方式解决：

方案1：表单层面直接标记字段内容安全

无需修改模板，直接在Form类的初始化逻辑中给Quill字段内容加安全标记：

from django.utils.safestring import mark_safe
from crispy_forms.layout import Layout, Field

class CreateProjectForm(forms.ModelForm):
    class Meta:
        model = Project
        fields = "__all__"

    def __init__(self, *args, **kwargs):
       super(CreateProjectForm, self).__init__(*args, **kwargs)
       # 给Quill字段的初始值标记为安全，避免HTML被转义
       if self.instance and self.instance.project_description:
           self.initial['project_description'] = mark_safe(self.instance.project_description)
       
       self.helper = FormHelper()
       self.helper.layout = Layout(
           'project_type',
           'slug',
           'key',
           # 可给Quill字段单独指定CSS类，方便后续JS初始化编辑器
           Field('project_description', css_class='quill-editor')
       )

方案2：模板层面手动加safe过滤器

如果不想改动Form代码，也可以在渲染表单的模板中单独处理富文本字段：

<form method="post">
    {% csrf_token %}
    {# 渲染除了描述之外的其他字段 #}
    {% crispy form form.helper %}
    
    {# 单独渲染富文本描述字段，手动加safe #}
    <div class="form-group">
        <label for="{{ form.project_description.id_for_label }}">项目描述</label>
        {{ form.project_description|safe }}
        {% if form.project_description.errors %}
            <div class="text-danger mt-1">{{ form.project_description.errors.0 }}</div>
        {% endif %}
    </div>
    
    <button type="submit" class="btn btn-primary mt-3">提交</button>
</form>

补充说明 #

如果是输入侧的Quill编辑器没有正常加载，除了上述配置外，还需要确认模板中已经正确引入Quill的CSS、JS资源，且初始化编辑器的JS代码正确绑定到了对应字段的DOM元素上。使用mark_safe时注意做好内容安全校验，避免XSS注入风险。

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