Django28——使用Django 富文本CKEditor上传图片

• 1、安装pillow库
• 2、注册ckeditor_uploader应用
• 3、设置媒体资源根目录
• 4、设置图片上传路径
• 5、配置上传url
• 6、配置media的访问
• 7、修改models
• 8、刷新后台，查看效果
• 9、查看后台保存图片的情况
• 10、查看数据库情况

pip install django-ckeditor

 pip install pillow

INSTALLED_APPS = [
    ...
    # 注册富文本编辑器 ckeditor
    "ckeditor",
    "ckeditor_uploader",  # 图片上传需注册
]

使用上传功能，需要设置上传位置。该文件是上传到media目录，所以也需要设置media。创建media文件夹，放在django项目根目录下。

media存放用户上传的景点图片等资源，这些资源文件变动频率较高，因此与静态资源区分不同的存储路径。

# ckeditor上传图片配置项，设置媒体资源的保存路径
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

正文中添加图片，使用django ckeditor上传，设置保存在配置属性CKEDITOR_UPLOAD_PATH设置的文件夹中，该文件夹必须在媒体资源文件夹的目录下。

CKEDITOR_UPLOAD_PATH = "upload"

上传功能需要有地址可以请求，需要提供上传的url。打开全局的urls.py，添加设置到urlpatterns中：

 path('ckeditor/', include('ckeditor_uploader.urls')),  # 此行是新增的

上传的图片是到media中，不是在static中。我们还需要设置media可被访问

from django.conf.urls.static import static  # 此行是新增
from django.conf import settings  # 此行是新增

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) 

• ckeditor.fields.RichTextField 不支持上传文件的富文本字段
• ckeditor_uploader.fields.RichTextUploadingField 支持上传文件的富文本字段

from ckeditor_uploader.fields import RichTextUploadingField  # 此句是新增

content = RichTextUploadingField(verbose_name='景点正文') 

点击该按钮弹出如下上传文件框：


点击选择文件，上传，确定如下图：