摘要：選擇該頁面綁定的標簽指定圖片上傳處理目錄注其中為了顯示為中文，標明了中文，同時需要下載語言包放到對應的文件夾下。

我們常因為django的自帶admin后臺功能而選擇該框架，但也因為其自動生成的特殊性而在做出特別的更改的時候束手束腳，鑒于項目已經采用了django，而后臺要求能夠直接上傳富文本內容直接用于網頁顯示，定制性高，后來翻了目前較為知名的幾款富文本編輯框，覺得還是tinymce符合能夠集成到django admin的簡便條件，但是tinymce免費版不提供圖片本地上傳的服務，所以只能自己找辦法集成圖片上傳到tinymce，以下記錄一遍說明過程。

項目環境：
python2.7.13
django1.11.6
windows 10
該環境下創建了一個最初始的django項目，models.py中添加了一個用于測試的model，其中用于關聯富文本顯示的為TextField字段，代碼如下：

models.py

# -*-coding:utf-8 -*-
from django.db import models

# Create your models here.


class TestTinymce(models.Model):
    title = models.CharField("標題", max_length=20, default="")
    content = models.TextField("文本", default="")

    class Meta:
        db_table = "test_tinymce"
        verbose_name = "測試"
        verbose_name_plural = "測試"

    def __unicode__(self):
        return self.title

之后使用命令建表，使得項目能夠運行起來，并添加django admin登錄用戶名密碼等，使得項目能夠進入到后臺界面，并且在admin.py中注冊，使得我們添加的表格能夠在django admin中使用起來，進入以下界面：

此時的添加測試數據頁面，TextField字段顯示為普通的文本域：

tinymce官方下載為https://www.tinymce.com/downl...

下載其中的Download TinyMCE Community到本地解壓，取出其中的tinymce目錄，整個復制到django項目中你的靜態文件目錄，目前的文件目錄如下：

整合tinymce和django admin重要的是需要在django后臺加載的時候初始化tinymce的初始化函數，按照指定的參數生成對應的富文本框，我們通過admin.py來加載js到對應的model處理界面：

admin.py

# -*-coding:utf-8 -*-
from django.contrib import admin
import models
# Register your models here.
class TestTinymce_Admin(admin.ModelAdmin):

    class Media:
        js = [
            "/static/tinymce/js/jquery.min.js",   # 必須首先加載的jquery，手動添加文件
            "/static/tinymce/js/tinymce/tinymce.min.js",   # tinymce自帶文件
            "/static/tinymce/js/tinymce/plugins/jquery.form.js",    # 手動添加文件
            "/static/tinymce/js/tinymce/textarea.js",   # 手動添加文件，用戶初始化參數
        ]

admin.site.register(models.TestTinymce, TestTinymce_Admin)

其中jquery.min.js為普通的jquery文件，版本合適即可，tinymce.min.js為tinymce自帶文件，jquery.form.js為手動添加，是一個form插件，支持ajax表單提交和ajax文件上傳，textarea.js是我自定義的一個js，寫的初始化對應的富文本的參數，包含指定圖片上傳的指定處理路徑。

textarea.js

tinymce.init({
    selector: "textarea",   // 選擇該頁面綁定的標簽
    themes: "modern",
    menubar: false,
    convert_urls: false,
    height: 450,
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern imagetools",
        "link imageupload"
    ],
    toolbar: "undo redo | imageupload link | bold italic | styleselect fontselect fontsizeselect | bullist numlist outdent indent | alignleft aligncenter alignright alignjustify | print preview media | forecolor backcolor emoticons",
    content_css: [
    "http://fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css",
    "http://www.tinymce.com/css/codepen.min.css"
    ],
    imageupload_url: "/upload_img/",    // 指定圖片上傳處理目錄
    language:"zh_CN"
});

注：其中為了顯示為中文，標明了中文zh_CN，同時需要下載語言包zh_CN.js放到對應的langs文件夾下。此時，django admin中的文本域已經被富文本框代替，我們此時只需要把對應的圖片上傳整合：

添加圖片上傳插件imageupload到plugins文件夾下，此時就符合了我們在textarea.js中toolbar參數中添加的imageupload，同時下載jquery.form.js在符合我們在admin.py加載的路徑放置：

此時我們可以看見在富文本框上指定位置出現了圖片上傳的按鈕，點擊出現上傳本地文件的按鈕：

在彈出按鈕出現之后，我們處理imageupload_url: "/upload_img/"上傳文件的路徑背后的視圖處理，根據django的映射規則，我們在urls.py添加路徑：

url(r"^upload_img/$", views.upload_img),  # 后臺富文本框上傳圖片

添加views.py中的處理接收上傳的函數upload_img：

# -*-coding:utf-8 -*-
from django.shortcuts import render
from django.views.decorators.csrf import csrf_exempt
import json
import time
from PIL import Image
from django.conf import settings
from django.http import HttpResponse
# Create your views here.

static_base = "http://127.0.0.1:8000"
static_url = static_base + settings.MEDIA_URL  # 上傳文件展示路徑前綴

# 上傳圖片 POST
@csrf_exempt
def upload_img(request):
    file = request.FILES["file"]
    data = {
        "error":True,
        "path":"",
    }
    if file:
        timenow = int(time.time()*1000)
        timenow = str(timenow)
        try:
            img = Image.open(file)
            img.save(settings.MEDIA_ROOT + "content/" + timenow + unicode(str(file)))
        except Exception,e:
            print e
            return HttpResponse(json.dumps(data), content_type="application/json")
        imgUrl = static_url + "content/" + timenow + str(file)
        data["error"] = False
        data["path"] = imgUrl
    return HttpResponse(json.dumps(data), content_type="application/json")

創建接收上傳的文件的文件夾，按照settings.py中的配置和指定的上傳文件目錄：

其中為了防止回顯的時候不識別media路徑，在urlpatterns中添加如下：

from django.conf.urls import url
from django.contrib import admin
from app import views
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    url(r"^upload_img/$", views.upload_img),  # 后臺富文本框上傳圖片
    url(r"^admin/", admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

目前功能已經全部實現，可以看見上傳圖片成功之后回顯：

順便附上settings.py中的上傳文件和靜態文件目錄的配置：

# Internationalization
# https://docs.djangoproject.com/en/1.10/topics/i18n/

LANGUAGE_CODE = "zh-hans"

TIME_ZONE = "Asia/Shanghai"

USE_I18N = True

USE_L10N = True

USE_TZ = False


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.8/howto/static-files/

STATIC_URL = "/static/"

# 當運行 python manage.py collectstatic 的時候
# STATIC_ROOT 文件夾 是用來將所有STATICFILES_DIRS中所有文件夾中的文件，以及各app中static中的文件都復制過來
# 把這些文件放到一起是為了用apache等部署的時候更方便
STATIC_ROOT = os.path.join(BASE_DIR, "collected_static")

# 其它 存放靜態文件的文件夾，可以用來存放項目中公用的靜態文件，里面不能包含 STATIC_ROOT
# 如果不想用 STATICFILES_DIRS 可以不用，都放在 app 里的 static 中也可以
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "common_static"),
)

# 這個是默認設置，Django 默認會在 STATICFILES_DIRS中的文件夾 和 各app下的static文件夾中找文件
# 注意有先后順序，找到了就不再繼續找了
STATICFILES_FINDERS = (
    "django.contrib.staticfiles.finders.FileSystemFinder",
    "django.contrib.staticfiles.finders.AppDirectoriesFinder"
)

ADMIN_MEDIA_PREFIX = STATIC_URL + "admin/"


MEDIA_URL = "/media/"
MEDIA_ROOT = BASE_DIR + "/media/upload/"

附上GITHUB上傳的源碼：https://github.com/Z-July/dja...