配置Django-TinyMCE元件支援上傳圖片功能
阿新 • • 發佈：2020-08-06
Django自帶的Admin後臺，好用，TinyMCE作為富文字編輯器，也蠻好用的，這兩者結合起來在做部落格的時候很方便（當然部落格可能更適合用Markdown來寫），但是Django-TinyMCE這個元件預設沒有圖片上傳功能的，需要我們自己實現，本文將一步步帶大家實現這個圖片上傳功能。
讀者也可以舉一反三實現其他需要和Django結合的功能。
## 編寫上傳圖片邏輯
在任一`views.py`裡新增程式碼：
```python
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': "錯誤的請求"})
```
## 配置路由
```python
urlpatterns = [
# 上傳圖片
path('upload_image/', views.upload_image),
# tinymce 編輯器
path('tinymce/', include('tinymce.urls')),
]
```
## 配置tinymce
由於tinymce是一個前端元件，所以需要使用js來配置。
在`static/tinymce/js`目錄下新增一個js檔案（目錄不存在請手動建立），名字隨意，我這裡是`textareas.js`：
```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的配置可以參考官方文件：[https://www.tiny.cloud/docs/demo/basic-example/](https://www.tiny.cloud/docs/demo/basic-example/)
## 在admin中配置
最後，我們需要在用到TinyMCE的admin中配置自定義的js，才能使前面的配置生效。
參考程式碼如下，按照自己的實際model配置就行了。
```python
@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~
## 參考資料
- [django admin後臺接入tinymce並且支援圖片上傳](https://www.cnblogs.com/lgh344902118/p/8378021.html)
- [Django使用tinyMCE圖片上傳](https://blog.csdn.net/qq_37782332/article/details/105184301)
- [Django下tinymce的本地上傳圖片功能](https://www.jianshu.com/p/7f837c76b106)
## 歡迎交流
我整理了一系列的技術文章和資料，在公眾號「程式設計實驗室」後臺回覆 linux、flutter、c#、netcore、android、kotlin、java、python 等可獲取相關技術文章和資料，同時有任何問題都可以在公眾號後臺