django下的ckeditor 5.0 文本編輯器上傳功能。

完整的後臺界面怎麼能夠沒有文本編輯器，可是django的admin界面很疑惑，沒有自帶文本編輯器，好在網上有很多成型的庫能夠用

我用的是ckeditor編輯器，安裝和配置我引用別人的博客

這篇博客配置講的很詳細，以後就能夠用RichTextField來定義模型，後臺默認就是文本編輯器。

可是問題來了，文本編輯器是沒有上傳圖片的功能，只能貼連接。

網上之前有兩篇博客也是講上傳的，一篇是java web，一篇是django的

django的連接在這裏 django下ckeditor上傳圖片的實現

javaweb的連接在這裏 CKEditor實現圖片上傳

建議先看完這兩篇，我在看django這一篇的時候就發現，django這篇博客裏面的步驟一以下：

步驟1：

下載ckeditor，找到image.js這個文件，搜索「upload」能夠找到這一段id:'Upload',hidden:true。實際上上傳功能被隱藏了，把上面的true改爲false，再打開編輯器，就能找到上傳功能了。

 

最新5.02版本彷佛搜索不到，我直接參考java web這一篇

原文：第一種：仍是剛纔那個image.js
搜索「upload」能夠找到這一段 id:'Upload',hidden:true，而我使用的4.3的是

id:"Upload",hidden:!0，反正改成false就好了，(遺憾的是此種方法對我這個版本不起做用)

 

第二種：打開config.js文件，加入下面一句話

config.filebrowserImageUploadUrl= "admin/UserArticleFileUpload.do"; //待會要上傳的action或servlet

這篇文章還講了怎麼去掉圖片預覽框裏面的一堆英文，能夠參考一下，我用上文的第二種方法，緣由是第一種方法搜索文件裏面的時候不存在，不過不用擔憂，第二種方法妥妥的，先

看下我本身修改後的，config.js文件吧

 

/**
 * Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.image_previewText=' ';
    config.filebrowserImageUploadUrl= "/uploadimg/";

};

什麼意思，我講一下，第二個和java的不同，緣由是我在後臺測試上傳的時候報錯，由於他是提交到這個url（服務器+端口+「/uploadimg/」）的，因此我就在django裏面url對應的視圖寫下以下url：

from django.conf.urls import include, url
from django.contrib import admin
from sjjgWeb.views import *
from mySjjg.settings import BASE_DIR
urlpatterns = [
    url(r'^ckeditor',include('ckeditor_uploader.urls')),
    url(r'^admin/', include(admin.site.urls)),
    url(r'^$',index),
    url(r'^index$',index,name='homepage'),
    url(r'^login$',login),
    url(r'^reg$',register),
    url(r'^test$',test),
    url(r'index/(?P<root>\d)/(?P<node>\d)',information,name='information'),

    url(r'^uploadimg/',upload_image),  #重點看這個，別的不用看 <<<——————————<<<看這裏


    url(r'^upload/(?P<path>(\S)*)','django.views.static.serve',{'document_root':BASE_DIR+'\upload'}),
]

也就是說個人config.js裏面寫的是對應的url，這樣的話大家就能夠取本身喜歡的名字，而後視圖函數upload_image參考了一下django-ckeditor那篇文章的步驟三的那一段代碼

我作了小小的修改，粗略的看了一下，成功後就沒有再去看過，有什麼問題歡迎提出。

import time


@csrf_protect
def upload_image(request):
    if request.method == 'POST':
        callback = request.GET.get('CKEditorFuncNum')
        try:
            path = "upload/" + time.strftime("%Y%m%d%H%M%S",time.localtime())   <---還有這裏，這裏path修改你要上傳的路徑，我記得我是修改了的，這樣就上傳到了upload文件夾
            f = request.FILES["upload"]
            file_name = path + "_" + f.name
            des_origin_f = open(file_name, "wb+")
            for chunk in f:                 <--#我修改的是這裏，由於python後期的版本放棄了chunk函數，直接遍歷類文件類型就能夠生成迭代器了。
                des_origin_f.write(chunk)
            des_origin_f.close()
        except Exception, e:
            print e
        res = r"<script>window.parent.CKEDITOR.tools.callFunction("+callback+",'/"+file_name+"', '');</script>"
        return HttpResponse(res)
    else:
        raise Http404()

注意import time和Http404,原文是沒有提到的。具體本身看看，反正這段代碼不難。

作到這裏之後，我測試的時候，最新版本上傳圖片的時候，那裏失敗後有個height很矮的框框，根本不知道里面是什麼，我直接用鼠標進去，所有複製黏貼下來，在文本文件裏查看

發現是csrf，也就是django那篇博客說的步驟4吧，其實在步驟三的時候，也是我複製黏貼看錯誤，發現路徑之後測試的。最重要是那篇博客後面有步驟五沒提到

csrf有經驗的都知道，ajax提交的話就要用的一段官方代碼，django那篇博客講的仍是挺清楚的，我這裏附上我修改後的文件截圖

學過jquery都知道，在（function（）{    這裏面最前面加就好了。                  }）

而後是表單，按照原文搜索獲得了

我添加後是這一串，本身慢慢看

'<form enctype="multipart/form-data" method="POST" dir="'+k+'" lang="'+l+'" action="',CKEDITOR.tools.htmlEncode(d.action),'"><input type="hidden" name="csrfmiddlewaretoken" value="'+getCookie("csrftoken")+'">

以後就ok了，然而上傳時成功了，可是圖片預覽不到，哈哈，由於django的url訪問方式你也是知道的，並非傳統的靜態文件訪問訪問，我試了不少方式，包括本身寫view，最後解決辦法是這樣，

url那一串我發現默認訪問路徑最後是,,127.0.0.1/upload/342328305230.jpg，相似如此，很明顯，咱們沒有upload視圖函數嘛，因而我本身寫了一個。

先再一次看看個人url

from django.conf.urls import include, url
from django.contrib import admin
from sjjgWeb.views import *
from mySjjg.settings import BASE_DIR
urlpatterns = [
    url(r'^ckeditor',include('ckeditor_uploader.urls')),
    url(r'^admin/', include(admin.site.urls)),
    url(r'^$',index),
    url(r'^index$',index,name='homepage'),
    url(r'^login$',login),
    url(r'^reg$',register),
    url(r'^test$',test),
    url(r'index/(?P<root>\d)/(?P<node>\d)',information,name='information'),
    url(r'^uploadimg/',upload_image),

    url(r'^upload/(?P<path>(\S)*)','django.views.static.serve',{'document_root':BASE_DIR+'\upload'}),  <---這一次重點是這裏
]

原本本身寫了視圖函數，最後發現系統有默認靜態處理的，第一個參數是 都懂得，第二個是系統的默認靜態管理函數，第三個是上傳的以爲路徑，我引用了setting文件的BASE_DIR變量，最後加上你上傳文件的文件夾就能夠像訪問靜態文件同樣訪問了。到這裏就一切大功告成了。。。附上個人成功圖片。

想問我爲何後臺管理爲何那麼漂亮，我不會告訴你是djangoadminsuit皮膚的。