Django自帶的Admin后臺(tái)，好用，TinyMCE作為富文本編輯器，也蠻好用的，這兩者結(jié)合起來在做博客的時(shí)候很方便（當(dāng)然博客可能更適合用Markdown來寫），但是Django-TinyMCE這個(gè)組件默認(rèn)沒有圖片上傳功能的，需要我們自己實(shí)現(xiàn)，本文將一步步帶大家實(shí)現(xiàn)這個(gè)圖片上傳功能。

讀者也可以舉一反三實(shí)現(xiàn)其他需要和Django結(jié)合的功能。

編寫上傳圖片邏輯

在任一views.py里添加代碼：

import osfrom 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": "錯(cuò)誤的文件格式"})upload_time = timezone.now()path = os.path.join(settings.MEDIA_ROOT,'tinymce',str(upload_time.year),str(upload_time.month),str(upload_time.day))# 如果沒有這個(gè)路徑則創(chuàng)建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': "錯(cuò)誤的請(qǐng)求"})

配置路由

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

配置tinymce

由于tinymce是一個(gè)前端組件，所以需要使用js來配置。

在static/tinymce/js目錄下添加一個(gè)js文件（目錄不存在請(qǐng)手動(dòng)創(chuàng)建），名字隨意，我這里是textareas.js：

tinymce.init({selector: 'textarea', // change this value according to your HTMLimages_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', });

這段配置代碼里面我加了一些插件，參照官方文檔改了一下菜單欄和工具欄，并且把顯示語言改成中文（默認(rèn)是英文）。

注意里面的images_upload_url，這個(gè)是剛才配置了上傳圖片邏輯的路由。

關(guān)于TinyMCE的配置可以參考官方文檔：https://www.tiny.cloud/docs/demo/basic-example/

在admin中配置

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

參考代碼如下，按照自己的實(shí)際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']

測(cè)試

經(jīng)過上面的配置就完成了，現(xiàn)在已經(jīng)可以了，打開admin后臺(tái)有tinymce字段的地方試一下唄~

效果OK~

參考資料

• django admin后臺(tái)接入tinymce并且支持圖片上傳
• Django使用tinyMCE圖片上傳
• Django下tinymce的本地上傳圖片功能

歡迎交流

我整理了一系列的技術(shù)文章和資料，在公眾號(hào)「程序設(shè)計(jì)實(shí)驗(yàn)室」后臺(tái)回復(fù) linux、flutter、c#、netcore、android、kotlin、java、python 等可獲取相關(guān)技術(shù)文章和資料，同時(shí)有任何問題都可以在公眾號(hào)后臺(tái)留言~

總結(jié)

以上是生活随笔為你收集整理的图片上传组件_配置Django-TinyMCE组件 实现上传图片功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。