后台文本編輯器KindEditor介紹

我們在自己的個人主頁添加文章內容的時候，需要對文章內容進行修飾，此時就需要文本編輯器助陣了！

功能預覽

KindEditor文本編輯器

KindEditor文本編輯器官網：http://kindeditor.net/demo.php

本文簡單介紹下KindEditor的引入、主要的參數以及上傳文件等功能。

KindEditor的引入

在官網下載好編輯器文件后，我們把它放在項目的static/blog目錄下，如下圖所示：

那么在我們需要調用編輯器的模板中加入相應的script標簽就好了

<script src="/static/blog/jquery-1.12.4.js"></script>
<script charset="utf-8" src="/static/blog/kindeditor/kindeditor-all.js"></script>
<script>
    KindEditor.ready(function(K) {
            window.editor = K.create('#editor_id',{
                //待填充內容
            });
    });
</script>

這里需要注意兩點：

一:需要先引入Jquery。

二:這里的'#editor_id'是Jquery的id選擇器，選取的是id為eidtor_id的textarea，因此我們在上面必須得定義一個id為editor_id的textarea來做本編輯器的“容器”：

<textarea name="content" id="article_content1" cols="30" rows="10"></textarea>

KindEditor的參數

關於KindEditor的參數詳見這里：http://kindeditor.net/docs/option.html

這里簡單介紹幾個：

下面是本系統的編輯器參數

<script>
    KindEditor.ready(function(K) {
            window.editor = K.create('#editor_id',{
                width:"800",
                height:"600",
                resizeType:0,
                uploadJson:"/upload/",
                extraFileUploadParams:{
                    csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
                    username:'{{ request.user.username }}'
                },
                filePostName:"upload_img"
            });
    });
</script>

寬度與高度是上面的width與height。

還有一個items，它表示編輯器的各種功能按鈕，默認不寫的情況下所有功能都展示，可以根據實際需求加載相應的功能模塊。

resizeType代表編輯框能否拖動高度與寬度；參數為0表示不可改變，參數為1代表只能改變高度，參數為2表示可以同時改變高度與寬度。

uploadJson與filePostName是與文件上傳相關的參數，接下來會詳細講述。

extraFileUploadParams是將數據傳給后台功能的參數，這里需要注意為了防止頁面上報csrftoken錯誤，需要將csrf中間件生成的input標簽的值傳給后台！

KindEditor的文件上傳

我們上面介紹的uploadJson參數就是制定文件上傳的路由的，本例指定的是'/upload/'。

接着我們需要在路由中新建一條文件上傳的路由：

path('upload/', views.upload),

然后在視圖函數中創建相應的視圖函數

##編輯器上傳圖片
def upload(request):
    print(request.FILES)
    img_obj = request.FILES.get("upload_img")
    print(img_obj.name)
    #MEDIA_ROOT = os.path.join(BASE_DIR,'media')
    path = os.path.join(settings.MEDIA_ROOT, "add_article_img", img_obj.name)
    with open(path, "wb") as f:
        for line in img_obj:
            f.write(line)
    return HttpResponse("ok")

這樣，我們就可以在編輯器中上傳圖片了。需要提醒大家的一點是，文件最終上傳的目錄是上面代碼中path變量中指定的文件目錄。