配置Django-TinyMCE組件支援上傳圖片功能

2020 年 8 月 6 日
筆記
[Python]Django

Django自帶的Admin後台，好用，TinyMCE作為富文本編輯器，也蠻好用的，這兩者結合起來在做部落格的時候很方便（當然部落格可能更適合用Markdown來寫），但是Django-TinyMCE這個組件默認沒有圖片上傳功能的，需要我們自己實現，本文將一步步帶大家實現這個圖片上傳功能。

讀者也可以舉一反三實現其他需要和Django結合的功能。

編寫上傳圖片邏輯

在任一views.py里添加程式碼：

import os

from django.conf import settings
from django.http import JsonResponse
from django.utils import timezone
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def upload_image(request):
    if request.method == "POST":
        file_obj = request.FILES['file']
        file_name_suffix = file_obj.name.split(".")[-1]
        if file_name_suffix not in ["jpg", "png", "gif", "jpeg", ]:
            return JsonResponse({"message": "錯誤的文件格式"})

        upload_time = timezone.now()
        path = os.path.join(
            settings.MEDIA_ROOT,
            'tinymce',
            str(upload_time.year),
            str(upload_time.month),
            str(upload_time.day)
        )
        # 如果沒有這個路徑則創建
        if not os.path.exists(path):
            os.makedirs(path)

        file_path = os.path.join(path, file_obj.name)

        file_url = f'{settings.MEDIA_URL}tinymce/{upload_time.year}/{upload_time.month}/{upload_time.day}/{file_obj.name}'

        if os.path.exists(file_path):
            return JsonResponse({
                "message": "文件已存在",
                'location': file_url
            })

        with open(file_path, 'wb+') as f:
            for chunk in file_obj.chunks():
                f.write(chunk)

        return JsonResponse({
            'message': '上傳圖片成功',
            'location': file_url
        })
    return JsonResponse({'detail': "錯誤的請求"})

配置路由

urlpatterns = [
    # 上傳圖片
    path('upload_image/', views.upload_image),
    # tinymce 編輯器
    path('tinymce/', include('tinymce.urls')),
]

配置tinymce

由於tinymce是一個前端組件，所以需要使用js來配置。

在static/tinymce/js目錄下添加一個js文件（目錄不存在請手動創建），名字隨意，我這裡是textareas.js：

tinymce.init({
    selector: 'textarea',  // change this value according to your HTML
    images_upload_url: '/upload_image/', // Django路由中圖片上傳地址
    height: 500,
    plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table paste code help wordcount'
    ],
    menubar: 'favs file edit view insert format tools table help',
    toolbar: 'undo redo | formatselect | ' +
        'bold italic backcolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'code image | ' +
        'removeformat | help',
    language: 'zh_CN',
});

這段配置程式碼裡面我加了一些插件，參照官方文檔改了一下菜單欄和工具欄，並且把顯示語言改成中文（默認是英文）。

注意裡面的images_upload_url，這個是剛才配置了上傳圖片邏輯的路由。

關於TinyMCE的配置可以參考官方文檔：//www.tiny.cloud/docs/demo/basic-example/

在admin中配置

最後，我們需要在用到TinyMCE的admin中配置自定義的js，才能使前面的配置生效。

參考程式碼如下，按照自己的實際model配置就行了。

@admin.register(models.Activity)
class ActivityAdmin(admin.ModelAdmin):
    list_display = ['pk', 'title']

    class Media:
        js = [
            'tinymce/jquery.tinymce.min.js',
            'tinymce/tinymce.min.js',
            'tinymce/js/textareas.js'
        ]

測試

經過上面的配置就完成了，現在已經可以了，打開admin後台有tinymce欄位的地方試一下唄~

效果OK~

參考資料

歡迎交流

我整理了一系列的技術文章和資料，在公眾號「程式設計實驗室」後台回復 linux、flutter、c#、netcore、android、kotlin、java、python 等可獲取相關技術文章和資料，同時有任何問題都可以在公眾號後台留言~

Tags: [Python]Django