Django模板中Ckeditor-RichTextField无法显示问题求助

核心原因 #

Admin面板会自动加载富文本编辑器所需的静态资源（CSS/JS），但自定义模板未配置相关资源加载，导致编辑器无法正常渲染。

步骤1：修正表单字段定义 #

如果你的Post模型中content字段已定义为RichTextField，表单无需重复声明该字段，让ModelForm自动继承模型字段，这样才能自动生成编辑器所需的媒体资源：

修改Forms.py：

class Create(forms.ModelForm):
    title = forms.CharField(label='title', max_length=100)

    class Meta:
        model = Post
        fields = ['title', 'content']

步骤2：在模板中加载编辑器媒体资源 #

在表单代码前添加{{ form.media }}，它会自动引入富文本编辑器需要的CSS和JS文件：

修改create.html：

{% block main %}
    <div class="blocker" style="height: 100px;"></div>
    <form method="post">
        {% csrf_token %}
        {{ form.media }}
        {{ form.as_p }}
        <button type="submit">Absenden</button>
    </form>
{% endblock %}

步骤3：检查富文本库配置（以django-ckeditor为例） #

若使用django-ckeditor作为富文本组件，确认以下配置：

• 在settings.py的INSTALLED_APPS中添加：

  INSTALLED_APPS = [
      # 其他已安装应用
      'ckeditor',
      'ckeditor_uploader',  # 若需要上传功能则添加
  ]
  

• 在settings.py中配置媒体路径：

  MEDIA_URL = '/media/'
  MEDIA_ROOT = BASE_DIR / 'media'
  CKEDITOR_UPLOAD_PATH = 'uploads/'  # 上传文件存储路径
  

• 在项目urls.py中添加ckeditor路由：

  from django.conf import settings
  from django.conf.urls.static import static
  from django.urls import include, path
  
  urlpatterns = [
      # 你的其他路由
      path('ckeditor/', include('ckeditor_uploader.urls')),
  ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  

步骤4：简化视图保存逻辑（可选） #

无需手动提取cleaned_data，直接调用form.save()即可完成数据保存：

修改Views.py：

def create(request):
    if request.method == 'POST':
        form = Create(request.POST)
        if form.is_valid():
            form.save()
            return redirect("../blog")
    else:
        form = Create()
    return render(request, 'create.html', {'form': form})

静态资源验证 #

• 开发环境：确保DEBUG=True，Django会自动处理静态资源加载
• 生产环境：运行python manage.py collectstatic将静态资源收集到指定目录

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