Django中富文本編輯器KindEditor的使用和圖片上傳

1.簡介

KindEditor 是一套開源的在線HTML編輯器，主要用於讓用戶在網站上得到所見即所得編輯效果，開發人員能夠用 KindEditor 把傳統的多行文本輸入框(textarea)替換爲可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫，能夠無縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用

2.主要特色

• 快速：體積小，加載速度快
• 開源：開放源代碼，高水平，高品質
• 底層：內置自定義 DOM 類庫，精確操做 DOM
• 擴展：基於插件的設計，全部功能都是插件，可根據需求增減功能
• 風格：修改編輯器風格很是容易，只需修改一個 CSS 文件
• 兼容：支持大部分主流瀏覽器，好比 IE、Firefox、Safari、Chrome、Opera 

3.使用

3.1下載路徑: http://kindeditor.net/down.php

下載後根據需求刪除如下目錄。

• asp - ASP程序
• asp.net - ASP.NET程序
• php - PHP程序
• jsp - JSP程序
• examples - 演示文件

3.2將文件夾拷貝到項目根目錄的/static/文件夾中:

3.3在kineeditor目錄下建立conifg.js配置文件

#config.js
KindEditor.ready(function(K) {
        // K.create('textarea[name=content]', {
        K.create('#id_content', {
            width: '800px',
            height: '500px',
        });
});

註釋: 這裏的#id_content,或是name=content,是經過登陸admin後，右擊對應控件，選擇審查元素得到的。

 3.4在admin.py對應的管理類中添加class Media,引入js文件。

from .models import  Article
class ArticleAdmin(admin.ModelAdmin):
    list_display = ['title']
    class Media:
        js = ('/static/js/kindeditor-4.1.10/kindeditor-all-min.js',
              '/static/js/kindeditor-4.1.10/lang/zh-CN.js',
              '/static/js/kindeditor-4.1.10/config.js')

admin.site.register(Article,ArticleAdmin)

Blog中有文章Model，文章內容會包括各類格式的數據，好比：圖片、超連接、段落等。爲了達到這個目的，咱們可使用富文本編輯器。

咱們有多重選擇來使用富文本編輯器，好比kindeditor、django-ckeditor、自定義ModelAdmin的媒體文件。

這樣就將kindeditor加上了富文本編輯器。

4.圖片上傳

可是若是咱們上次圖片仍然會報錯，由於咱們並無處理文件上傳按鈕。

4.1：在config.js加入

'uploadJson':'/admin/upload/kindeditor',

這裏/admin/upload/kindeditor是python的路由。

在url.py中有配置url(r'^admin/upload/(?P<dir_name>[^/]+)$', upload_image, name='upload_image'),

dir_name是文件的存儲路徑。

4.2：upload_image是自定義的保存圖片的函數。

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()
    url_part = dir_name + '/%d/%d/' % (today.year, today.month)
    dir_name = os.path.join(dir_name, str(today.year), str(today.month))
    print("*********", os.path.join(settings.MEDIA_ROOT, dir_name))
    if not os.path.exists(os.path.join(settings.MEDIA_ROOT, dir_name)):
        os.makedirs(os.path.join(settings.MEDIA_ROOT, dir_name))
    return dir_name,url_part


# 圖片上傳
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, url_part = upload_generation_dir(dir_name)
    path = os.path.join(settings.MEDIA_ROOT, relative_path_file)
    print("&&&&path", path)
    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 + url_part +file_name
    open(path_file, 'wb').write(files.file.read())
    return {"error": 0, "url": file_url}

文件保存後，路徑爲<img src="/upload/kindeditor/2018/5/dea7fffe-6251-11e8-946f-40b034409066.jpg" alt="" />

4.3：使用django配置/upload來顯示圖片。

from django.views.static import serve

url(r'^upload/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT, }),

4.4：setting增長media的配置

MEDIA_URL = "/upload/"
MEDIA_ROOT = os.path.join(BASE_DIR, "upload")

參考文章

http://www.cnblogs.com/wupeiqi/articles/6307554.html

https://www.cnblogs.com/yangshl/p/6505308.html