Django集成django-ckeditor时{{ form.media }}在HTML中不生效问题求助

问题根因 #

你当前的表单未为description字段指定CKEditor专属渲染组件，默认使用Django原生文本框Widget，因此无法加载CKEditor编辑器样式。同时你在表单初始化时全局给所有字段加了form-control类，该Bootstrap样式会覆盖CKEditor的默认样式配置，也会导致展示异常。 #

分步操作 #

1. 安装依赖 #

首先确认已安装django-ckeditor包：

pip install django-ckeditor

2. 配置项目settings.py #

在INSTALLED_APPS列表中添加CKEditor应用：

INSTALLED_APPS = [
    # 其他原有应用
    'ckeditor',
]

# 可选配置：自定义编辑器工具栏、尺寸等参数
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'full',
        'height': 300,
        'width': '100%',
    },
}

3. 修改forms.py文件 #

导入CKEditor组件，给description字段指定对应Widget，同时避免给编辑器字段加form-control类防止样式冲突：

from django.forms import ModelForm
from ckeditor.widgets import CKEditorWidget
from .models import Notes

class NotesForm(ModelForm):
    description = forms.CharField(widget=CKEditorWidget())
    class Meta:
        model = Notes
        fields = ['description']

    def __init__(self, *args, **kwargs):
        super(NotesForm, self).__init__(*args, **kwargs)
        # 仅给非CKEditor以外的字段加form-control类
        for field_name, field in self.fields.items():
            if field_name != 'description':
                field.widget.attrs.update({
                    'class': 'form-control'
                })

4. 模板部分确认 #

你现有模板中{{ notes_form.media }}放置在{{ notes_form.as_p }}之前的写法正确，不需要修改，调整后刷新页面即可正常加载CKEditor编辑器。 #

异常排查 #

如果调整后仍未生效，打开浏览器开发者工具控制台，检查是否存在CKEditor相关静态资源加载404错误，可执行python manage.py collectstatic收集静态资源后重试。

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