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

簡單使用：

<div class="comm">
                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div style="margin: 0 auto;" class="comment-area">
                        <div class
 
="model {% if req.session.user_info %} hide {% endif %}">
                            您需要登錄後才可以回帖 <a href="/login.html">登錄</a> | <a href="/register.html">立即註冊</a>
                        </div>
                        <textarea name="content" id="content"></textarea>
                    </div>
                    <div class
 
="comment-sub">
                        <span>已輸入23/255</span>
                        <button type="button" class="btn btn-primary btn-sm" {% if not req.session.user_info %} disabled="disabled" {% endif %}>提交回復</button>
                    </div>
                </form>
            </div>

    <script>
        $(function () {
            initKindEditor();
        });

        function initKindEditor() {
            var kind = KindEditor.create(‘#content‘, {
                width: ‘100%‘,       // 文本框寬度(可以百分比或像素)
                height: ‘300px‘,     // 文本框高度(只能像素)
                resizeType:0,　　　　//不允許修改大小
                uploadJson: ‘/uploadfile.html‘, //文件上傳路徑
                extraFileUploadParams: {        //文件上傳的額外參數
                    ‘csrfmiddlewaretoken‘: ‘{{ csrf_token }}‘　　//令牌使用，在POST數據上傳時需要的
                },
                //filePostName:‘img‘,  修改上傳的文件名字，默認是imgFile
                //fileManagerJson: ‘/kind/file_manager/‘, //指定瀏覽遠程圖片的服務器端程序。
                allowPreviewEmoticons: true,    //預覽表情
                allowImageUpload: true, //允許圖片上傳
                items: [
                    ‘fontname‘, ‘fontsize‘, ‘|‘, ‘forecolor‘, ‘hilitecolor‘, ‘bold‘, ‘italic‘, ‘underline‘,
                    ‘removeformat‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘insertorderedlist‘,
                    ‘insertunorderedlist‘, ‘|‘, ‘emoticons‘, ‘image‘, ‘link‘]  //編輯樣式選擇
            });
        }
    </script>

更多參數了解： http://kindeditor.net/docs/option.html

KindEditor的圖片上傳：

                uploadJson: ‘/uploadfile.html‘, //文件上傳路徑
                extraFileUploadParams: {        //文件上傳的額外參數
                    ‘csrfmiddlewaretoken‘: ‘{{ csrf_token }}‘ //令牌使用，在POST數據上傳時需要的
                },
                //filePostName:‘img‘,  修改上傳的文件名字

這3個和圖片上傳有關（了解）

後臺處理：

settings配置：

MEDIA_URL = ‘/static/uploads/‘
MEDIA_ROOT=os.path.join(BASE_DIR, ‘static/uploads‘)  #註意使用路徑連接時後面的必須是相對路徑

IMAGE_FIELDS = (
    ‘jpeg‘,
    ‘png‘,
    ‘gif‘,
    ‘jpg‘,
    ‘bmp‘,
)

>>> os.path.join("c:/mypy/","/da/dwa")  
‘c:/da/dwa‘
>>> os.path.join("c:/mypy/","da/dwa")
‘c:/mypy/da/dwa‘

註意後面不能寫成絕對路徑，不然路徑連接時會出錯（可以想下linux等系統，不分盤符,‘/‘就是根路徑），所以我們註意這裏

url設置：

    url(r‘^uploadfile.html$‘,home.uploadFile,{"document_root": settings.MEDIA_ROOT,‘web_root‘:settings.MEDIA_URL,‘image_list‘:settings.IMAGE_FIELDS}),

文件上傳處理業務：

def handle_uploaded_file(fp,filePath,webPath,filename):  //fp文件指針，filepath是我們存放文件的基礎目錄， webpath是我們網站訪問該圖片的目錄，filename是文件名
    if not os.path.exists(filePath):
        os.makedirs(filePath)
    with open(filePath+filename,‘wb+‘) as destination:
        for chunk in fp.chunks():
            destination.write(chunk)　　　　　　//寫入文件
    return webPath+filename　　//返回web訪問的文件路徑

def uploadFile(req,*args,**kwargs):
    if req.method != "POST":
        return redirect(‘/‘)
    status = {
        ‘error‘: 0,
        ‘url‘: ‘‘,
        ‘message‘: ‘‘
    }
    if req.FILES[‘imgFile‘]:
        file_name = str(req.FILES.get("imgFile"))
        from blog import settings
        if file_name.split(‘.‘)[-1] in kwargs[‘image_list‘]:
            #先上傳到臨時文件夾中，然後在與用戶提交的評論進行正則匹配，若是匹配到的數據，則移動到正常文件夾中，剩余的圖片（用戶在編輯時自己刪除了的）我們清空該文件夾，並替換用戶的圖片路徑即可
            #static_path = "comment/"+str(datetime.date.today())+‘/‘
            static_path = "temp/"+str(req.session[‘user_info‘][‘id‘])+‘/‘ #以用戶id為文件名的臨時文件夾
            web_path = kwargs[‘web_root‘] + static_path
            file_path = kwargs[‘document_root‘]+‘/‘+ static_path
            ret = handle_uploaded_file(req.FILES[‘imgFile‘],file_path,web_path,file_name)
            status[‘url‘] = ret
        else:
            status[‘error‘]=1
            status[‘message‘]="文件格式不正確"
    else:
        status[‘error‘] = 2
        status[‘message‘] = "文件上傳失敗"
    return HttpResponse(json.dumps(status))

後面圖片處理思路：

為用戶先創立一個臨時文件夾，在用戶上傳評論時，與img標簽進行正則匹配，若是匹配到的數據，我們則移入到正確的路徑，然後將臨時文件夾刪除即可。

其他思路可以參考：

http://kindeditor.net/view.php?bbsid=5&postid=6049

基本上2種解決方案：

1. 先把圖片提交到臨時目錄，提交到服務器後，用正則提取圖片路徑，和上傳過的圖片比較，如果用到就把圖片移動到實際目錄。

2. 采用圖片空間管理，讓用戶自己刪除多余的圖片，一個用戶的總容量限制就可以了，現在很多大網站都是這個做法。

或者：前端使用ajax進行刪除，但是如果用戶可以進行撤銷操作，那麽原來的圖片使用ajax似乎不太正確：

http://kindeditor.net/view.php?bbsid=7&postid=6834&pagenum=1

大概思路：

可以知道數據是使用iframe進行傳輸的：iframe無刷新上傳文件：http://www.cnblogs.com/ssyfj/p/8533287.html（了解）

我們可以操作該對象，對img點擊事件進行監聽

$(".ke-edit-iframe")    //獲取iframe對象

obj = $(".ke-edit-iframe") .contains()    //獲取iframe中的document對象

$(obj).find("img")  //獲取img元素對象，使用click等就可以進行監聽，使用戶點擊使進行刪除選項，同意則使用ajax進行刪除

KindEditor的簡單使用，以及上傳圖片預覽圖片，用戶刪除圖片後的數據處理（重點）