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 %}
                }
        });
});