Kindeditor 使用思路

環境：

下載地址：http://kindeditor.net/down.php
文檔地址：http://kindeditor.net/doc.php

PS：下載的工具包中有一些是配合特定後臺語言的Dome，並不是咱們實際須要的。
        其中核心的部分只有：
       

第一次跑起Kindeditor

<!-- kindeditor 須要指定在textarea   -->
<div style="width:600px; margin:0 auto">
    <textarea id="content"></textarea>
</div>

<script src="jquery-min.js"></script>
<script src="kindeditor-all.js">
<script>
    $(function(){
        KindEditor.create("#content",{
            width:"100%",
            height:"300px",
            minWidth:200,
            minHeight:300,
        });
    })
//編輯器初始化參數：
//  http://kindeditor.net/docs/option.html
</script>

 

難點1：上傳文件

// JS

KindEditor.create("#content",{
    uploadJson: "文件上傳路徑",   // 其中附帶參數dir=image、dir=flash、dir=file
    filePostName: "上傳文件的POST的name名",
})

def upload_img(request):
    request.GET.get('dir')
    print(request.FILES.get('fafafa'))
    # 獲取文件保存
    import json
    dic = {    # kindeditor的固定格式
        'error': 0,
        'url': '/static/imgs/20130809170025.png',   # 頁面將生成預覽
        'message': '錯誤了...'
    }

    return HttpResponse(json.dumps(dic))

 

難點2：遠程文件管理

KindEditor.create("#content",{

    fileManagerJson: "文件管理的路徑",       // django中，urls中設置路徑。
    allowFileManager:true,   //kindeditor中，上傳圖片時，增長圖片空間按鈕。
})

import os
import time
import json
def file_manager(request):
    """
    文件管理
    :param request:
    :return:
    {
        moveup_dir_path: "url,上級目錄",
        current_dir_path: "url 當前目錄",
        current_url: "預覽圖片時的目錄地址前綴",
        file_list: [
            {
                'is_dir': True,
                'has_file': True,
                'filesize': 0,
                'dir_path': '',
                'is_photo': False,
                'filetype': '',
                'filename': xxx.png,
                'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path)))
            },
            {
                'is_dir': True,
                'has_file': True,
                'filesize': 0,
                'dir_path': '',
                'is_photo': False,
                'filetype': '',
                'filename': xxx.png,
                'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path)))
            }
        ]

    }


    """
    dic = {}
    root_path = 'C:/Users/Administrator/PycharmProjects/day24/static/'
    static_root_path = '/static/'
    request_path = request.GET.get('path')
    if request_path:
        abs_current_dir_path = os.path.join(root_path, request_path)
        move_up_dir_path = os.path.dirname(request_path.rstrip('/'))
        dic['moveup_dir_path'] = move_up_dir_path + '/' if move_up_dir_path else move_up_dir_path

    else:
        abs_current_dir_path = root_path
        dic['moveup_dir_path'] = ''

    dic['current_dir_path'] = request_path
    dic['current_url'] = os.path.join(static_root_path, request_path)

    file_list = []
    for item in os.listdir(abs_current_dir_path):
        abs_item_path = os.path.join(abs_current_dir_path, item)
        a, exts = os.path.splitext(item)
        is_dir = os.path.isdir(abs_item_path)
        if is_dir:
            temp = {
                'is_dir': True,
                'has_file': True,
                'filesize': 0,
                'dir_path': '',
                'is_photo': False,
                'filetype': '',
                'filename': item,
                'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path)))
            }
        else:
            temp = {
                'is_dir': False,
                'has_file': False,
                'filesize': os.stat(abs_item_path).st_size,
                'dir_path': '',
                'is_photo': True if exts.lower() in ['.jpg', '.png', '.jpeg'] else False,
                'filetype': exts.lower().strip('.'),
                'filename': item,
                'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path)))
            }

        file_list.append(temp)
    dic['file_list'] = file_list
    return HttpResponse(json.dumps(dic))

PS：

allowFileUpload                 true時顯示文件上傳按鈕。

allowMediaUpload            true時顯示視音頻上傳按鈕。

allowFlashUpload              true時顯示Flash上傳按鈕。

allowImageUpload            true時顯示圖片上傳按鈕。

 

難點3：上傳圖片時，ajax附帶參數：解決csrf_token問題

KindEditor.ready(function(K) {
        K.create('#id', {
                extraFileUploadParams : {
                        item_id : 1000,
                        category_id : 1,
                        csrfmiddlewaretoken:{{ csrf_token }}
                        // 在HTML中，form標籤增長{% csrf_token %}
                }
        });
});