如何在Django中添加CKEditor？求分步教程及静态文件问题解决

一、分步集成CKEditor #

1. 安装依赖包 #

通过pip安装官方维护的Django CKEditor插件：

pip install django-ckeditor

2. 配置项目settings.py #

• 在INSTALLED_APPS中添加CKEditor相关应用：

INSTALLED_APPS = [
    # 其他已注册应用
    'ckeditor',
    'ckeditor_uploader',  # 需启用图片上传时添加
]

• 添加CKEditor核心配置（按需调整）：

# CKEditor上传路径（启用上传时必填）
CKEDITOR_UPLOAD_PATH = 'ckeditor_uploads/'
# 图片处理依赖（需提前安装pillow：pip install pillow）
CKEDITOR_IMAGE_BACKEND = 'pillow'
# 自定义编辑器工具栏与尺寸
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'full',
        'height': 400,
        'width': '100%',
    },
}

• 配置媒体文件路径（启用上传时必填）：

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

3. 配置项目urls.py #

在根路由文件中添加CKEditor的上传与浏览路由：

from django.conf import settings
from django.conf.urls.static import static
from ckeditor_uploader import views as ckeditor_views

urlpatterns = [
    # 其他现有路由
    path('ckeditor/upload/', ckeditor_views.upload, name='ckeditor_upload'),
    path('ckeditor/browse/', ckeditor_views.browse, name='ckeditor_browse'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

4. 在模型中使用富文本字段 #

根据需求选择普通富文本字段或支持上传的字段：

from ckeditor.fields import RichTextField
from ckeditor_uploader.fields import RichTextUploadingField

class Article(models.Model):
    # 无上传功能的富文本
    summary = RichTextField()
    # 支持图片/文件上传的富文本
    content = RichTextUploadingField()

5. 迁移数据库 #

执行迁移命令生成CKEditor相关表结构：

python manage.py makemigrations
python manage.py migrate

6. 页面中渲染富文本 #

在模板中直接输出字段内容即可（无需额外处理，Django会自动解析HTML）：

{{ article.content|safe }}

二、collectstatic命令异常解决 #

针对截图中的问题，按以下步骤排查：

1. 检查静态文件基础配置 #

确保settings.py中静态文件路径配置正确：

STATIC_URL = '/static/'
# collectstatic的目标目录
STATIC_ROOT = BASE_DIR / 'staticfiles'
# 自定义静态文件目录（可选）
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

2. 修复权限问题 #

如果提示权限不足，给目标目录赋予读写权限：

sudo chmod -R 755 staticfiles/

或使用当前用户权限执行命令：

python manage.py collectstatic --user

3. 强制重新收集静态文件 #

清除旧的静态文件缓存后重新收集：

python manage.py collectstatic --clear

4. 验证CKEditor静态文件完整性 #

如果CKEditor静态文件缺失，重新安装插件：

pip uninstall django-ckeditor
pip install django-ckeditor

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