開啟微信掃一掃，關注微信公眾號【資料與演算法聯盟】

寫在前邊的話

一路走來，DJango也用了挺久了，自己也做了一些基於Django的小專案，具體可看github，但是Django預設的admin後臺編輯文字框實在是太醜了，而且單一，其實在很久之前就想寫這篇文章了，但是由於種種原因拖延到了現在，終於下定了決心來寫，現在時間是00:17。

KindEditor介紹

官網地址是：

使用過程

1：下載該檔案，解壓至相應的js檔案目錄

例如我的目錄是：

這裡我刪除了多餘的檔案，因為是python專案，其他的都用不到，所以選擇刪除，節省空間

2：settings.py和urls.py配置

在專案的settings.py 中設定MEDIA_ROOT 目錄
eg：

#檔案上傳配置
MEDIA_ROOT = os.path.join(BASE_DIR,’uploads’)

專案的根urls.py 配置
eg：

url(r'^admin/uploads/(?P<dir_name>[^/]+)$', upload_image, name='upload_image'),
url(r"^uploads/(?P<path>.*)$", views.static.serve, {"document_root": settings.MEDIA_ROOT, }),

3：編寫upload.py檔案

該檔案存放於專案的根目錄同名資料夾下，eg：

upload.py：主要是對上傳的圖片做一些限制

# -*- coding: utf-8 -*-
 

from django.http import HttpResponse
from django.conf import settings
from django.views.decorators.csrf import csrf_exempt
import os
import uuid
import json
import datetime as dt

@csrf_exempt
def upload_image(request, dir_name):
    ##################
    #  kindeditor圖片上傳返回資料格式說明：
    # {"error": 1, "message": "出錯資訊"}
    # {"error": 0, "url": "圖片地址"}
    ##################
    result = {"error": 1, "message": "上傳出錯"}
    files = request.FILES.get("imgFile", None)
    if files:
        result =image_upload(files, dir_name)
    return HttpResponse(json.dumps(result), content_type="application/json")

#目錄建立
def upload_generation_dir(dir_name):
    today = dt.datetime.today()
    dir_name = dir_name + '/%d/%d/' %(today.year,today.month)
    if not os.path.exists(settings.MEDIA_ROOT):
        os.makedirs(settings.MEDIA_ROOT)
    return dir_name

# 圖片上傳
def image_upload(files, dir_name):
    #允許上傳檔案型別
    allow_suffix =['jpg', 'png', 'jpeg', 'gif', 'bmp']
    file_suffix = files.name.split(".")[-1]
    if file_suffix not in allow_suffix:
        return {"error": 1, "message": "圖片格式不正確"}
    relative_path_file = upload_generation_dir(dir_name)
    path=os.path.join(settings.MEDIA_ROOT, relative_path_file)
    if not os.path.exists(path): #如果目錄不存在建立目錄
        os.makedirs(path)
    file_name=str(uuid.uuid1())+"."+file_suffix
    path_file=os.path.join(path, file_name)
    file_url = settings.MEDIA_URL + relative_path_file + file_name
    open(path_file, 'wb').write(files.file.read())
    return {"error": 0, "url": file_url}

4：config.js 配置

該配置檔案主要是對django admin後臺作用的，比如說我們現在有一個news的app，我們需要對該模組下的 news類的content加上富文字編輯器，這裡需要做兩步

第一：在news 的admin.py中加入

class Media:
    js = (
        '/static/js/kindeditor-4.1.10/kindeditor-min.js',
        '/static/js/kindeditor-4.1.10/lang/zh_CN.js',
        '/static/js/kindeditor-4.1.10/config.js',
    )

第二：config.js 中配置
上邊說了我們是要對news的content加上富文字編輯器，那麼我們首先要定位到該文字框的name屬性，滑鼠右鍵檢視原始碼，如下紅線標示：

config.js 中加入：

//news
KindEditor.ready(function(K) {
    K.create('textarea[name="new_content"]', {
        width : "800px",
        height : "500px",
        uploadJson: '/admin/uploads/kindeditor',
    });
});

至此，已經完成，如果你還有什麼不懂的，可以加我關注我的微信公眾號，進行提問，謝謝！

Over！