django-kindeditor編輯器

一:kindeditor是HTML的一款編輯器插件.

1,下載地址::    KindEditor 4.1.11 (2016-03-31)

2,修改html頁面的具體的操做:

1,在須要顯示編輯器的位置添加textarea輸入框
<textarea id="editor_id" name="content" style="width:700px;height:300px;">  #這裏的id值是惟一的,可是也能夠變,只要後面用到id值的地方都同樣便可.
</textarea>

注意:
    id在當前頁面必須是惟一的值。
    在textarea裏設置HTML內容便可實現編輯，在這裏須要注意的是，若是從服務器端程序(ASP、PHP、ASP.NET等)直接顯示內容，則必須轉換HTML特殊字符(>,<,&,」)。
　　具體請參考各語言目錄下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。
    在有些瀏覽器上不設寬度和高度可能顯示有問題，因此最好設一下寬度和高度。寬度和高度可用inline樣式設置，也可用 編輯器初始化參數 設置。

 

2,在該HTML頁面添加如下腳本

<script charset="utf-8" src="/editor/kindeditor.js"></script> #這裏的兩行視狀況而定.
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>　　#若是報錯可把這兩行去掉
<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#editor_id');    #這裏面還能夠加上相應的值拓展屬性,具體能夠看初始化屬性
        });
</script>

 

3,獲取textarea裏面的html值

// 取得HTML內容
html = editor.html();

// 同步數據後能夠直接取得textarea的value
editor.sync();
html = document.getElementById('editor_id').value; // 原生API
html = K('#editor_id').val(); // KindEditor Node API
html = $('#editor_id').val(); // jQuery

// 設置HTML內容
editor.html('HTML內容');

Note

• KindEditor的可視化操做在新建立的iframe上執行，代碼模式下的textarea框也是新建立的，因此最後提交前須要執行 sync() 將HTML數據設置到原來的textarea。
• KindEditor在默認狀況下自動尋找textarea所屬的form元素，找到form後onsubmit事件裏添加sync函數，因此用form方式提交數據，不須要手動執行sync()函數。
• KindEditor默認採用白名單過濾方式，可用 htmlTags 參數定義要保留的標籤和屬性。固然也能夠用 filterMode 參數關閉過濾模式，保留全部標籤。

// 關閉過濾模式，保留全部標籤
KindEditor.options.filterMode = false; KindEditor.ready(function(K)) { K.create('#editor_id'); }

 3,操做img圖片:

在html裏面先寫好html代碼:

例:
KindEditor.ready(function(K) {    //這段代碼是處理img以及byte類型代碼
                window.editor = K.create('#editor_id',{
                    resizeType:0,   //設置該textarea能不能變化
                    uploadJson:"/blog/uploadFile/",   //下載byte類型用一個單獨的路徑運行
                    extraFileUploadParams:{
                           csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
                       }  //加上這個字段傳文件過去,能夠和圖片一塊兒傳過去.
                });
        })


處理圖片咱們給他一個單獨的路徑,和視圖函數處理他.後面的extraFileUploadParams字段,是爲了配合POST請求的forbidden,一塊兒傳過去的.

 

在views視圖函數裏

def uploadFile(request):
    print(request.file)  #能夠查看file的文件格式,而且查看到鍵值對
    file_obj=request.FILES.get('imgFile')  #imgFile就是file文件的鍵
    file_name=file_obj.name         #取到文件名
    path=os.path.join(根路徑,文件夾路徑,file_name)  #拼接路徑,建立文件夾.
    
    with open(path,'wb')as f:
         for i in file_obj.chunks():            #遍歷圖片,chunks()指按照必定量取值  
         f.write(i)
    response={
     'error':0,
     url:'/存圖片的路徑/'  
}    
return Httpresponse(json.dumps(response))
#這裏必須用json處理,  返回給插件識別,  url路徑是爲了渲染到前端,給用戶預覽.