如何在Django博客中集成Medium风格富文本编辑器并解决图片存储问题

编辑器选型 #

优先推荐以下两款体验接近Medium的编辑器，替换现有TinyMCE可以大幅提升使用体验：

• Quill：轻量易配置，API友好，中小项目集成成本极低
• TipTap：基于ProseMirror开发，块级编辑逻辑完全对齐Medium，定制性极强，适合需要深度自定义编辑能力的场景
• Editor.js：纯块结构编辑器，输出结构化JSON内容，可灵活适配多种前端渲染场景

集成操作步骤（以Quill为例） #

1. Django后端配置 #

首先配置媒体资源存储规则，在settings.py中添加以下配置：

# 媒体资源访问路径
MEDIA_URL = '/media/'
# 媒体资源本地存储根目录
MEDIA_ROOT = BASE_DIR / 'media'

在项目主urls.py中添加媒体资源访问路由：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 原有项目路由保持不变
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

新增图片上传视图，接收编辑器上传的图片文件，存储后返回可访问的URL：

# views.py
from django.http import JsonResponse
from django.views.decorators.http import require_POST
from django.views.decorators.csrf import csrf_exempt
import os
from uuid import uuid4

@csrf_exempt
@require_POST
def upload_editor_image(request):
    image_file = request.FILES.get('image')
    if not image_file:
        return JsonResponse({'code': 1, 'msg': '未获取到图片文件'}, status=400)
    # 生成唯一文件名避免重名覆盖
    file_ext = os.path.splitext(image_file.name)[1]
    file_name = f"{uuid4().hex}{file_ext}"
    save_path = os.path.join(settings.MEDIA_ROOT, 'editor_images', file_name)
    os.makedirs(os.path.dirname(save_path), exist_ok=True)
    # 存储文件到本地
    with open(save_path, 'wb+') as f:
        for chunk in image_file.chunks():
            f.write(chunk)
    # 返回可访问的图片URL
    image_url = f"{settings.MEDIA_URL}editor_images/{file_name}"
    return JsonResponse({'code': 0, 'url': image_url})

将上传视图添加到路由中即可。

2. 前端编辑器集成 #

替换原有TinyMCE的引入代码，初始化Quill编辑器，配置图片上传逻辑即可。

现有TinyMCE体验优化方案 #

如果暂时不想替换编辑器，可以在你现有配置基础上添加以下配置项提升体验：

1. 新增图片上传处理逻辑，补全images_upload_handler配置，关联上文的图片上传接口，解决图片无法上传的问题
2. 简化工具栏和菜单栏，移除不常用的打印、预览、页面分隔等功能，仅保留基础编辑选项，更接近Medium的简洁风格

图片存储位置说明 #

• 本地存储场景：所有用户上传的图片都会保存在你settings.py中MEDIA_ROOT配置的目录下，默认是项目根目录的media文件夹内，你可以在上传视图中自定义子目录规则，比如按上传日期、用户ID分类存储，避免单目录文件过多
• 高并发场景：可以将图片存储到对象存储服务中，仅需修改上传视图的存储逻辑，前端编辑器代码无需调整

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