編輯器

kindeditor 編輯器

博客園用的 TinyMCE 編輯器 支持拖放/粘貼上傳圖片

編輯器使用方法

1. 下載編輯器

下載 KindEditor 最新版本，下載以後打開 examples/index.html 就能夠看到演示。

下載頁面: http://www.kindsoft.net/down.php

2. 部署編輯器

解壓 kindeditor-x.x.x.zip 文件，將全部文件上傳到您的網站程序目錄裏，例如：http://您的域名/editor/

Note

您能夠根據需求刪除如下目錄後上傳到服務器。

• asp - ASP程序
• asp.net - ASP.NET程序
• php - PHP程序
• jsp - JSP程序
• examples - 演示文件

3. 修改HTML頁面

1. 在須要顯示編輯器的位置添加textarea輸入框。

<textarea id="editor_id" name="content" style="width:700px;height:300px;"> &lt;strong&gt;HTML內容&lt;/strong&gt; </textarea> 

Note

• 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> 

Note

• 第一個參數可用其它CSS選擇器，匹配多個textarea時只在第一個元素上加載編輯器。
• 經過K.create函數的第二個參數，能夠對編輯器進行配置，具體參數請參考 編輯器初始化參數 。

var options = { cssPath : '/css/index.css', filterMode : true }; var editor = K.create('textarea[name="content"]', options); 

4. 獲取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'); }


調節參數參考 http://kindeditor.net/doc.php
例如：

KindEditor.ready(function(K)) { K.create('#editor_id'，{
width:"800",
heigth:"600",
.....
}

); }

編輯器上傳文件

uploadJson

指定上傳文件的服務器端程序。

• 數據類型: String
• 默認值: basePath + ‘php/upload_json.php’
• 是post請求須要添加csrf

extraFileUploadParams

上傳圖片、Flash、視音頻、文件時，支持添加別的參數一併傳到服務器。

• 數據類型: Array
• 默認值: {}

KindEditor.ready(function(K) { K.create('#id', { extraFileUploadParams : { item_id : 1000, category_id : 1 } }); }); 

Note

4.1.1版本開始支持。

上傳文件寫法

KindEditor.ready(function(K)) { K.create('#editor_id'，{

　　　　uploadJson：「/upload/」,   #上傳文件儲存路徑

 extraFileUploadParams : { 

　　　　　　　　csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()

},

filePostName:"upload_img"   #知道上傳文件的key值

}

def upload(request):
    """
    編輯器上傳文件接受視圖函數
    :param request:
    :return:
    """

    print(request.FILES)
    img_obj=request.FILES.get("upload_img") #取出文件對象
    print(img_obj.name)

    path=os.path.join(settings.MEDIA_ROOT,"add_article_img",img_obj.name) #文件保存路徑

    with open(path,"wb") as f:

        for line in img_obj:
            f.write(line)

import jsonresponse = {    'error':0,    'url':'media/add_articel_img%s'%img_obj}# 返回圖片路徑，預覽圖片return HttpResponse(json.dumps(response))