Day24-KindEditor基本使用和文件操做2

時間 2019-12-05

標籤 day24 day kindeditor 基本使用文件简体版

原文原文鏈接

KindEditor是一套開源的HTML可視化編輯器，主要用於讓用戶在網站上得到所見即所得編輯效果，兼容IE、Firefox、Chrome、Safari、Opera等主流瀏覽器。html

1. 準備前端

2. 寫一個kind的URL，定義函數，寫前端頁面python

kind.htmljquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width:500px;margin:0 auto">
        <textarea id="content"></textarea>
    </div>
    <script src="/static/jquery-1.12.4.js"></script>
    <script src="/static/kindeditor-4.1.10/kindeditor-all.js"></script>
    <script>
        $(function(){
            KindEditor.create('#content',{});
        })
    </script>
</body>
</html>

頁面效果：json

3. 經過把下列參數寫到字典中，來調整個性化頁面。瀏覽器

詳細參數能夠參考：http://kindeditor.net/docs/option.html編輯器

3.1 詳解items參數函數

效果：網站

3.2 用 noDisableItems 能夠讓某些圖標能看到，可是不能操做。url

3.3 文件上傳---uploadJson

發現上傳文件的時候，默認是提交到某一個固定的URL。（以下）

經過uploadJson能夠自定製上傳到哪裏

效果：

對應地，咱們應該在URL中添加upload_img路徑。

3.4 拿到上傳的文件之後，應該保存而且返回給用戶。

這裏省略了保存的過程，直接把圖片放到這個目錄下進行下一步。

views.py

def kind(request):
    return render(request,'kind.html')

def upload_img(request):
    #在這裏須要接收文件而且保存，而後返回給用戶。是以POST方式提交的。在這裏沒有寫保存的範本。
    print(request.FILES)
    import json
    dic={
        'error':0, #0表明是正確的,1表明是錯誤的。
        'url':'/static/imgs/1.png', ##把靜態文件的路徑返回到URL這裏，因此在頁面上就能夠作預覽了。

'message':'錯誤了...' } return HttpResponse(json.dumps(dic))

頁面效果：點擊上傳圖片之後就能夠預覽了。在內部用的是iframe+form

4. allowImageUpload: false（不容許），true（容許）是否容許圖片上傳。

　allowImageRemote: 是否容許遠程的圖片上傳。

5. autoHeightMode: true 自動增長高度

6. fileManagerJson:'/file_manager/' 文件管理的路徑

allowFileManager:true 文件管理

7. extraFileUploadParams: 上傳照片的時候，加上額外的參數（CSRF_TOKEN）

filePostName: 指定上傳文件form的名稱。

8. 增長文件空間管理的模塊

9. XSS特殊字符的過濾

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。