摘要：選擇該頁(yè)面綁定的標(biāo)簽指定圖片上傳處理目錄注其中為了顯示為中文，標(biāo)明了中文，同時(shí)需要下載語(yǔ)言包放到對(duì)應(yīng)的文件夾下。

我們常因?yàn)閐jango的自帶admin后臺(tái)功能而選擇該框架，但也因?yàn)槠渥詣?dòng)生成的特殊性而在做出特別的更改的時(shí)候束手束腳，鑒于項(xiàng)目已經(jīng)采用了django，而后臺(tái)要求能夠直接上傳富文本內(nèi)容直接用于網(wǎng)頁(yè)顯示，定制性高，后來(lái)翻了目前較為知名的幾款富文本編輯框，覺(jué)得還是tinymce符合能夠集成到django admin的簡(jiǎn)便條件，但是tinymce免費(fèi)版不提供圖片本地上傳的服務(wù)，所以只能自己找辦法集成圖片上傳到tinymce，以下記錄一遍說(shuō)明過(guò)程。

項(xiàng)目環(huán)境：
python2.7.13
django1.11.6
windows 10
該環(huán)境下創(chuàng)建了一個(gè)最初始的django項(xiàng)目，models.py中添加了一個(gè)用于測(cè)試的model，其中用于關(guān)聯(lián)富文本顯示的為TextField字段，代碼如下：

models.py

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

# Create your models here.


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

    class Meta:
        db_table = "test_tinymce"
        verbose_name = "測(cè)試"
        verbose_name_plural = "測(cè)試"

    def __unicode__(self):
        return self.title

之后使用命令建表，使得項(xiàng)目能夠運(yùn)行起來(lái)，并添加django admin登錄用戶名密碼等，使得項(xiàng)目能夠進(jìn)入到后臺(tái)界面，并且在admin.py中注冊(cè)，使得我們添加的表格能夠在django admin中使用起來(lái)，進(jìn)入以下界面：

此時(shí)的添加測(cè)試數(shù)據(jù)頁(yè)面，TextField字段顯示為普通的文本域：

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

下載其中的Download TinyMCE Community到本地解壓，取出其中的tinymce目錄，整個(gè)復(fù)制到django項(xiàng)目中你的靜態(tài)文件目錄，目前的文件目錄如下：

整合tinymce和django admin重要的是需要在django后臺(tái)加載的時(shí)候初始化tinymce的初始化函數(shù)，按照指定的參數(shù)生成對(duì)應(yīng)的富文本框，我們通過(guò)admin.py來(lái)加載js到對(duì)應(yīng)的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，手動(dòng)添加文件
            "/static/tinymce/js/tinymce/tinymce.min.js",   # tinymce自帶文件
            "/static/tinymce/js/tinymce/plugins/jquery.form.js",    # 手動(dòng)添加文件
            "/static/tinymce/js/tinymce/textarea.js",   # 手動(dòng)添加文件，用戶初始化參數(shù)
        ]

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

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

textarea.js

tinymce.init({
    selector: "textarea",   // 選擇該頁(yè)面綁定的標(biāo)簽
    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"
});

注：其中為了顯示為中文，標(biāo)明了中文zh_CN，同時(shí)需要下載語(yǔ)言包zh_CN.js放到對(duì)應(yīng)的langs文件夾下。此時(shí)，django admin中的文本域已經(jīng)被富文本框代替，我們此時(shí)只需要把對(duì)應(yīng)的圖片上傳整合：

添加圖片上傳插件imageupload到plugins文件夾下，此時(shí)就符合了我們?cè)趖extarea.js中toolbar參數(shù)中添加的imageupload，同時(shí)下載jquery.form.js在符合我們?cè)赼dmin.py加載的路徑放置：

此時(shí)我們可以看見(jiàn)在富文本框上指定位置出現(xiàn)了圖片上傳的按鈕，點(diǎn)擊出現(xiàn)上傳本地文件的按鈕：

在彈出按鈕出現(xiàn)之后，我們處理imageupload_url: "/upload_img/"上傳文件的路徑背后的視圖處理，根據(jù)django的映射規(guī)則，我們?cè)趗rls.py添加路徑：

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

添加views.py中的處理接收上傳的函數(shù)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")

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

其中為了防止回顯的時(shí)候不識(shí)別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),  # 后臺(tái)富文本框上傳圖片
    url(r"^admin/", admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

目前功能已經(jīng)全部實(shí)現(xiàn)，可以看見(jiàn)上傳圖片成功之后回顯：

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

# 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/"

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

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

# 這個(gè)是默認(rèn)設(shè)置，Django 默認(rèn)會(huì)在 STATICFILES_DIRS中的文件夾 和 各app下的static文件夾中找文件
# 注意有先后順序，找到了就不再繼續(xù)找了
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...