如何结合django-ckeditor-5实现媒体文件浏览、管理与复用？

1. 安装依赖 #

执行命令安装django-ckfinder：

pip install django-ckfinder

2. 配置Django项目 #

• 在settings.py的INSTALLED_APPS中添加ckfinder：

  INSTALLED_APPS = [
      # 其他已安装应用...
      'ckfinder',
  ]
  

• 修改CKEditor5配置，接入CKFinder的文件浏览器：

  CKEDITOR5_CONFIGS = {
      'default': {
          'toolbar': ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'imageUpload', 'mediaEmbed', 'undo', 'redo'],
          'image': {
              'toolbar': ['imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight'],
              'styles': ['alignLeft', 'alignCenter', 'alignRight']
          },
          # 接入CKFinder的上传和浏览接口
          'fileBrowser': {
              'uploadUrl': '/ckfinder/upload/',
              'browserUrl': '/ckfinder/browse/'
          }
      }
  }
  
  # CKFinder基础配置
  CKFINDER_UPLOAD_PATH = 'uploads/'  # 文件存储在MEDIA_ROOT下的uploads目录
  CKFINDER_AUTHENTICATION_FUNCTION = 'ckfinder.views.auth'  # 默认权限验证逻辑，可自定义
  

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

  from django.urls import path, include
  
  urlpatterns = [
      # 其他路由...
      path('ckfinder/', include('ckfinder.urls')),
  ]
  

3. 验证功能 #

重启Django服务后，进入Admin的编辑器界面，打开图片上传弹窗即可看到「浏览服务器」选项，点击进入CKFinder管理界面，就能实现文件的浏览、复用、删除操作——删除文件时会直接移除MEDIA_ROOT中的对应文件。

如果不想依赖CKFinder，可自行实现轻量文件管理功能：

1. 构建文件管理Admin页面 #

• 新建模型（可选，用于记录上传文件的元数据）：

  from django.db import models
  from django.conf import settings
  
  class UploadedFile(models.Model):
      file = models.FileField(upload_to='uploads/')
      uploaded_at = models.DateTimeField(auto_now_add=True)
  
      class Meta:
          verbose_name = '上传文件管理'
          verbose_name_plural = '上传文件管理'
  

• 在admin.py中注册并添加批量删除功能：

  from django.contrib import admin
  from .models import UploadedFile
  import os
  from django.conf import settings
  
  class UploadedFileAdmin(admin.ModelAdmin):
      list_display = ('file', 'uploaded_at')
      actions = ['delete_selected_files']
  
      def delete_selected_files(self, request, queryset):
          for obj in queryset:
              file_path = os.path.join(settings.MEDIA_ROOT, str(obj.file))
              if os.path.exists(file_path):
                  os.remove(file_path)
              obj.delete()
          self.message_user(request, '选中文件已成功删除')
      delete_selected_files.short_description = '删除选中的文件'
  
  admin.site.register(UploadedFile, UploadedFileAdmin)
  

2. 实现编辑器文件复用（可选） #

修改CKEditor5的配置，添加自定义文件浏览器按钮，通过AJAX接口获取MEDIA_ROOT下的文件列表，让编辑器可以直接选择复用已上传的文件。

补充：清理未被引用的文件 #

针对编辑器删除内容后文件残留的问题，可添加定时任务（比如用Celery）：扫描数据库中所有CKEditor5Field的内容，提取所有文件链接，对比MEDIA_ROOT中的文件，自动删除未被引用的文件。

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