如何在 Django 中正确使用 CKEditor 并保存富文本内容_技术教程

本文详解 django 中 ckeditor 表单提交失败、显示为原始 textarea 的根本原因——未调用 `form.is_valid()` 与 `cleaned_data`，并提供完整修复方案，确保富文本内容被正确解析并存入数据库。

在 Django 项目中集成 CKEditor（如 django-ckeditor）时，一个常见误区是：表单渲染正常、编辑器界面可用，但提交后数据库中却存入了包含标签的 HTML 片段，而非纯净的富文本内容。正如问题中所示，{{ form.as_p }} 渲染出的并非纯文本输入框，而是嵌套了 CKEditor 初始化逻辑的

✅ 正确做法：始终通过 cleaned_data 获取富文本值

首先，修正 forms.py 中的表单定义（注意：forms.Form 无需 Meta.model，且 fields 属性仅适用于 ModelForm）：

# forms.py
from django import forms
from ckeditor.widgets import CKEditorWidget

class PostForm(forms.Form):
    body = forms.CharField(widget=CKEditorWidget())
    # 注意：此处无需 Meta 类 —— 这是普通 Form，非 ModelForm

接着，在视图中严格遵循 Django 表单处理规范：

# views.py
from django.shortcuts import render, HttpResponseRedirect
from django.urls import reverse
from .forms import PostForm
from .models import Document, Category

def add_document(request):
    if request.method == "POST":
        form = PostForm(request.POST)  # 绑定 POST 数据
        if form.is_valid():  # ✅ 关键：触发验证与清洗
            body = form.cleaned_data['body']  # ✅ 获取清洗后的 HTML 字符串
            header = request.POST.get("header", "")
            category_id = request.POST.get("category")

            try:
                category = Category.objects.get(id=category_id)
                doc = Document.objects.create(
                    header=header,
                    body=body,  # ✅ 直接传入 clean HTML 字符串
                    category=category
                )
                return HttpResponseRedirect(
                    reverse("core:category", kwargs={"id": category_id})
                )
            except Category.DoesNotExist:
                form.add_error('category', 'Invalid category selected.')
        # 若验证失败，继续渲染表单（带错误提示）
    else:
        form = PostForm()  # GET 请求：返回空表单

    categories = Category.objects.all()
    languages = get_language_choices()
    context = {
        "allCategories": categories,
        "form": form,  # ✅ 传递实例，非类
        "languages": languages
    }
    return render(request, "documents/add-document.html", context)

⚠️ 同时检查模板与静态资源

确保 add-document.html 正确加载 CKEditor 资源：



    {% csrf_token %}
    
        {{ form.as_p }}
        {{ form.media }}

? {{ form.media }} 是关键！它由 CKEditorWidget 自动生成，负责引入 ckeditor.js、配置脚本及皮肤资源。缺失此行将导致编辑器不初始化，退化为普通 textarea。

? 额外建议：升级为 ModelForm（推荐）

为减少重复代码、自动绑定字段与验证，建议改用 ModelForm：

# forms.py
class PostForm(forms.ModelForm):
    class Meta:
        model = Document
        fields = ['header', 'body', 'category']
        widgets = {
            'body': CKEditorWidget(config_name='default'),  # 可选自定义配置
        }

对应视图简化为：

def add_document(request):
    if request.method == "POST":
        form = PostForm(request.POST)
        if form.is_valid():
            doc = form.save()  # ✅ 自动处理所有字段，包括 RichTextField
            return HttpResponseRedirect(
                reverse("core:category", kwargs={"id": doc.category_id})
            )
    else:
        form = PostForm()
    # ... 渲染逻辑同上

✅ 总结

问题现象	正确解法
提交后数据库存入 HTML 片段	✅ 始终使用 form.is_valid() + form.cleaned_data['field_name']
body = form 导致类型错误	✅ RichTextField 接收 str，非 Form 实例
编辑器未激活（显示为纯 textarea）	✅ 确保模板中包含 {{ form.media }}
手动提取 request.POST["header"] 易出错	✅ 用 form.cleaned_data 统一处理所有字段，含验证与清理