CKeditor 富文本编辑器 后台上传图片上传不到服务器的问题之解决

最近是要做一个新闻列表和新闻详情的接口，新闻的model有一个新闻内容字段是要用富文本字段的，就用了CKeditor富文本编辑器

一、安装    django-ckeditor     5.6.1  

二、添加到应用

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app',
    'inform',
    'inventory',
    'order',

    'rest_framework',
    'ckeditor',  # 富文本编辑器
    'ckeditor_uploader', # 富文本编辑器上传图片模块
]

三、在设置settings文件里面配置一下

# 富文本编辑器ckeditor配置
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'full',  # 工具条功能
        'height': 300,  # 编辑器高度
        # 'width': 300,  # 编辑器宽
    },
}

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
CKEDITOR_UPLOAD_PATH = 'upload/'
CKEDITOR_IMAGE_BACKEND = 'pillow'

四：定义模型类的时候使用富文本字段了

     # 富文本编辑字段
    from ckeditor_uploader.fields import RichTextUploadingField

    cover = models.ImageField("封面图片", upload_to="media", null=True, blank=True, default='')
    content = RichTextUploadingField(verbose_name='新闻内容')

五：总路由urls里面需要配置下

urlpatterns = [
    url(r'ckeditor/', include('ckeditor_uploader.urls')), #添加ckeditor的url到项目中
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)  # 没有这一句无法显示上传的图片

 

这样的话在后台admin就可以添加了

如果成功就是这样，可以显示图片：