如何在 Django 中正确使用 CKEditor 并保存富文本内容

顺亿

2026-11-14 • 👁 0人浏览过

本文详解 django 中 ckeditor 表单提交失败、显示为原始 textarea 的根本原因——未调用 `form.is_valid()` 与 `cleaned_data`，并提供完整修复方案，确保富文本内容被正确解析并存入数据库。在 Django 项目中集成 CKEditor（如 django-ckeditor）时，一个常见误区是：表单渲染正常、编辑器界面可用，但提交后数据库中却存入了包含

标签的 HTML 片段，而非纯净的富文本内容
。正如问题中所示，{{ form.as_p }} 渲染出的并非纯文本输入框，而是嵌套了 CKEditor 初始化逻辑的 <div><textarea> 结构；而直接将 form 实例（而非其清洗后的值）赋给模型字段，会导致 Django 将整个未处理的表单对象（含 HTML 模板结构）错误地序列化存储。
根本原因在于：
✅ CKEditorWidget 是
前端
增强组件，它通过 JavaScript 将 <textarea> 升级为可视化编辑器，
但提交时仍以普通 POST 字段（name="body"）发送纯 HTML 字符串
；
❌ 原始代码中 f = Document(..., body = form, ...) 错误地将整个 PostForm 实例传入 body 字段，而 RichTextField 期望的是字符串（如 "<p>Hello</p>"），不是 Form 对象；
❌ 未调用 form.is_valid()，导致 form.cleaned_data 不可用，无法安全提取已清洗、转义、验证过的富文本内容。
✅ 正确做法：始终通过 cleaned_data 获取富文本值
首先，修正 forms.py 中的表单定义（注意：forms.Form 无需 Meta.model，且 fields 属性仅适用于 ModelForm）：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"># forms.py
from django import forms
from ckeditor.widgets import CKEditorWidget

class PostForm(forms.Form):
    body = forms.CharField(widget=CKEditorWidget())
    # 注意：此处无需 Meta 类 —— 这是普通 Form，非 ModelForm</code></div>
接着，在视图中严格遵循 Django 表单处理规范：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"># 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)</code></div>
⚠️ 同时检查模板与静态资源
确保 add-document.
html
正确加载 CKEditor 资源：
Eclipse导入Android或其他的JAVA项目的正确方法 WORD版
本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
下载
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">
<form method="post">
    {% csrf_token %}
    <div class="form-group">
        {{ form.as_p }}
        {{ form.media }}  
    </div>
    <button type="submit">Save Document</button>
</form></code></div>
? {{ form.media }} 是关键！它由 CKEditorWidget 自动生成，负责引入 ckeditor.js、配置脚本及皮肤资源。缺失此行将导致编辑器不初始化，退化为普通 textarea。
? 额外建议：升级为 ModelForm（推荐）
为减少重复代码、自动绑定字段与验证，建议改用 ModelForm：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"># forms.py
class PostForm(forms.ModelForm):
    class Meta:
        model = Document
        fields = ['header', 'body', 'category']
        widgets = {
            'body': CKEditorWidget(config_name='default'),  # 可选自定义配置
        }</code></div>
对应视图简化为：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">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()
    # ... 渲染逻辑同上</code></div>
✅ 总结
问题现象正确解法提交后数据库存入 <textarea> HTML 片段✅ 始终使用 form.is_valid() + form.cleaned_data['field_name']body = form 导致类型错误✅ RichTextField 接收 str，非 Form 实例编辑器未激活（显示为纯 textarea）✅ 确保模板中包含 {{ form.media }}手动提取 request.POST["header"] 易出错✅ 用 form.cleaned_data 统一处理所有字段，含验证与清理
遵循以上规范，CKEditor 即可无缝融入 Django 表单流程，实现所见即所得的富文本编辑与可靠持久化。
                            </div>

<nav class="cxy-article-nav" aria-label="文章导航">

<a href="https://www.vqhf.com/article/40982.html" class="cxy-article-nav-link cxy-article-nav-prev">
                                    <span>‹</span>
                                    <div>
                                        <div class="cxy-article-nav-label">上一篇</div>
                                        <div class="cxy-article-nav-title">火币Web3生态入口 火币链应用v3.6APP下载与安装指南</div>
                                    </div>
                                </a>

<a href="https://www.vqhf.com/article/40997.html" class="cxy-article-nav-link cxy-article-nav-next">
                                    <div>
                                        <div class="cxy-article-nav-label">下一篇</div>
                                        <div class="cxy-article-nav-title">Hotcoin Global交易所怎么交易？Hotcoin Global交易所交易教程</div>
                                    </div>
                                    <span>›</span>
                                </a>

</nav>
                        </div>
                    </article>

<section class="cxy-content-section" style="margin-top: 20px;">
                        <h2 class="cxy-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="cxy-article-list">

<li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/40982.html" class="cxy-article-link">火币Web3生态入口 火币链应用v3.6APP下载与安装指南</a>
                                <div class="cxy-article-meta">2026-11-14</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/40975.html" class="cxy-article-link">Go语言中的异常处理和恢复</a>
                                <div class="cxy-article-meta">2026-11-14</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/40944.html" class="cxy-article-link">Go语言七篇入门教程三函数方法及接口</a>
                                <div class="cxy-article-meta">2026-11-14</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/40923.html" class="cxy-article-link">php MySQL连接测试</a>
                                <div class="cxy-article-meta">2026-11-14</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/40911.html" class="cxy-article-link">PHP6.0 很多函数不再向下兼容了？该怎么处理</a>
                                <div class="cxy-article-meta">2026-11-14</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/40997.html" class="cxy-article-link">Hotcoin Global交易所怎么交易？Hotcoin Global交易所交易教程</a>
                                <div class="cxy-article-meta">2026-11-14</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/40998.html" class="cxy-article-link">Somnia(SOMI)币2025年、2026年-2030年价格预测：看涨还是看跌？</a>
                                <div class="cxy-article-meta">2026-11-14</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/40999.html" class="cxy-article-link">Go语言中map[int]struct{}的JSON序列化实践与技巧</a>
                                <div class="cxy-article-meta">2026-11-14</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/41002.html" class="cxy-article-link">php 简单简洁分页类</a>
                                <div class="cxy-article-meta">2026-11-14</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/41004.html" class="cxy-article-link">PHP使用get_headers函数判断远程文件是否存在的方法</a>
                                <div class="cxy-article-meta">2026-11-14</div>
                            </li>

</ul>
                    </section>
                </div>

<aside class="cxy-sidebar cxy-sidebar-right" aria-label="侧边栏">
    
    <div class="cxy-widget">
        <h3 class="cxy-widget-title">推荐阅读</h3>
        <div class="cxy-recommend-grid">

<a href="https://www.vqhf.com/article/41023.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="合约爆仓通常从哪里开始_如何提前防范风险">
                </div>
                <div class="cxy-recommend-title">合约爆仓通常从哪里开始_如何提前防范风险</div>
            </a>
    
            <a href="https://www.vqhf.com/article/41017.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="印度头部交易所 WazirX 被盗 2.3 亿美元：曾因涉嫌洗钱被币安切断合作，年交易量下滑 90%">
                </div>
                <div class="cxy-recommend-title">印度头部交易所 WazirX 被盗 2.3 亿美元：曾因涉嫌洗钱被币安切断合作，年交易量下滑 90%</div>
            </a>
    
            <a href="https://www.vqhf.com/article/41016.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="Magento 修正来自首页的产品页面包屑导航_PHP教程">
                </div>
                <div class="cxy-recommend-title">Magento 修正来自首页的产品页面包屑导航_PHP教程</div>
            </a>
    
            <a href="https://www.vqhf.com/article/41013.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="二次开发思路求指导解决办法">
                </div>
                <div class="cxy-recommend-title">二次开发思路求指导解决办法</div>
            </a>

</div>
    </div>

<div class="cxy-widget">
        <h3 class="cxy-widget-title">最新文章</h3>
        <ul class="cxy-article-list">

<li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/41023.html" class="cxy-article-link">合约爆仓通常从哪里开始_如何提前防范风险</a>
                <div class="cxy-article-meta">2026-11-14</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/41017.html" class="cxy-article-link">印度头部交易所 WazirX 被盗 2.3 亿美元：曾因涉嫌洗钱被币安切断合作，年交易量下滑 90%</a>
                <div class="cxy-article-meta">2026-11-14</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/41016.html" class="cxy-article-link">Magento 修正来自首页的产品页面包屑导航_PHP教程</a>
                <div class="cxy-article-meta">2026-11-14</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/41013.html" class="cxy-article-link">二次开发思路求指导解决办法</a>
                <div class="cxy-article-meta">2026-11-14</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/41008.html" class="cxy-article-link">寻找百倍币合约：如何在二线交易所挖掘高倍率机会</a>
                <div class="cxy-article-meta">2026-11-14</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/41005.html" class="cxy-article-link">Python脚本如何找出微信上删除你好友的人？（附代码）</a>
                <div class="cxy-article-meta">2026-11-14</div>
            </li>

</ul>
    </div>

<div class="cxy-widget">
        <h3 class="cxy-widget-title">热门标签</h3>
        <div class="cxy-article-tag-list">

<a href="https://www.vqhf.com/tag/5702" class="cxy-article-tag-item">django</a>
    
            <a href="https://www.vqhf.com/tag/2618" class="cxy-article-tag-item">表单提交</a>
    
            <a href="https://www.vqhf.com/tag/1804" class="cxy-article-tag-item">java</a>
    
            <a href="https://www.vqhf.com/tag/1803" class="cxy-article-tag-item">javascript</a>
    
            <a href="https://www.vqhf.com/tag/1785" class="cxy-article-tag-item">red</a>
    
            <a href="https://www.vqhf.com/tag/1760" class="cxy-article-tag-item">前端</a>
    
            <a href="https://www.vqhf.com/tag/1750" class="cxy-article-tag-item">css</a>
    
            <a href="https://www.vqhf.com/tag/1731" class="cxy-article-tag-item">go</a>
    
            <a href="https://www.vqhf.com/tag/1718" class="cxy-article-tag-item">js</a>
    
            <a href="https://www.vqhf.com/tag/961" class="cxy-article-tag-item">html</a>

</div>
    </div>
</aside>
            </div>
        </div>
    </main>

<footer class="cxy-footer">
        <div class="cxy-container">
            <div class="cxy-footer-links" style="justify-content: center;">
                
                
                <a href="https://www.vqhf.com/22.html" class="cxy-footer-link">免责声明</a>
                
                <a href="https://www.vqhf.com/23.html" class="cxy-footer-link">关于我们</a>
                
                <a href="https://www.vqhf.com/24.html" class="cxy-footer-link">联系我们</a>
                
                <a href="https://www.vqhf.com/25.html" class="cxy-footer-link">投诉删除</a>
                
                <a href="https://www.vqhf.com/26.html" class="cxy-footer-link">投稿须知</a>
                
                
            </div>
            <div class="cxy-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 趣航编程网
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025063733号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

<button class="cxy-back-to-top" id="backToTop" aria-label="返回顶部">⇧</button>

<script src="https://www.vqhf.com/static/v0/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
<script>
(function() {
  var al = document.createElement("script");
  al.src = "/api/log?action=views&code=200&id=40988&path=http%3A%2F%2Fwww.vqhf.com%2Farticle%2F40988.html&type=archive&nonce="+Date.now();
  document.body.appendChild(al);
})();
</script>

</html>