kindeditor上傳圖片后,自動縮放超出指定尺寸(寬高)的圖片,不超過的則顯示原圖。
如下圖中所示,指定寬度為600px,第一張小圖寬不超過則顯示原圖,第二張大圖寬超過則將寬縮放為600px。
kindeditor點擊上傳圖片按鈕,默認顯示標簽為“本地上傳”功能。實現效果如下圖:
kindeditor富文本編輯器點擊上傳圖片按鈕,在彈出的窗口中去掉上傳網絡圖片的功能,只留下本地上傳,如圖:
KindEditor批量圖片上傳,默認允許用戶同時上傳20張圖片,單張圖片容量不超過1MB。
KindEditor編輯器上傳文件是沒有用戶登錄驗證和權限驗證的,即任何人都可以上傳,這樣很不安全,會有文件上傳漏洞。于是,我們就需要加一個權限驗證了。
以下是KindEditor 4.1.11的ASP接口示例:
KindEditor中單個圖片及文件上傳,可以直接在 KindEditor/asp/upload_json.asp 這個文件頂部加入如下代碼:
<% '……省略包含文件及打開數據庫和DB函數的代碼 if len(request.Cookies("username"))>0 and len(request.Cookies("password"))>0 then dim rs Set Rs = DB("Select [password] From [Admin] Where [Username]='" & username & "'",1) If Not Rs.Eof Then if rs(0)<>password then response.End() else response.End() End If : Rs.Close else response.End() end if %>
說明:單個圖片及文件上傳時,upload_json.asp文件可以獲取cookies和session,因此可以直接寫入驗證程序。
KindEditor上傳圖片及其它文件后,自動將生成的新路徑保存到數據庫表中,以方便我們對已上傳的文件進行后臺管理。
以下是KindEditor 4.1.11的ASP接口示例:
修改 KindEditor/asp/upload_json.asp 文件中以下代碼段:
set result = file.saveToFile(savePath, 0, true) if result.error then showError(file.Exception) else '以下代碼就是將文件URL存入數據庫Upload表中,可根據自己的程序要求編寫代碼 call db("Insert into [Upload] ([url]) values ('" & savePath & file.filename)& "')", 0) end if
KindEditor編輯器本地上傳圖片文件后(單個圖片上傳和批量圖片上傳),將數據回調,以實現自由設置任何一張圖片做為文章形象圖且在指定區域展示此形象圖的功能。
以下是KindEditor 4.1.11的示例代碼:
如果發布內容時只用一個KindEditor編輯器的話,可以開啟自動調整高度功能,若用了多個的話,個人建議還是不要開啟為好,以免查看和操作都比較麻煩。
默認不開啟。
<link rel="stylesheet" href="kindeditor/themes/default/default.css" /> <script charset="utf-8" src="kindeditor/kindeditor-all.js"></script> <script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script> <script> var KE; KindEditor.ready(function(K) { KE = K.create('#content',{ autoHeightMode : true, afterCreate : function() { this.loadPlugin('autoheight'); } }); }); </script> <textarea id="content" name="content" style=" width: 99%; height: 500px; visibility: hidden; display: block; "></textarea>
在我們使用編輯器的時候經常會想讓編輯器里上傳的某張圖片設定為文章的形象圖,這時我們可以用到單獨的“瀏覽服務器”這個按鈕功能。
以下是KindEditor 4.1.11的示例代碼:
使用KindEditor編輯器創建內容區,想讓表單即可以點提交按鈕提交表單也可以按Ctrl+Enter回車鍵提交表單。
以下是KindEditor 4.1.11測試代碼實例(部分HTML代碼省略):
<link rel="stylesheet" href="kindeditor/themes/default/default.css" /> <script charset="utf-8" src="kindeditor/kindeditor-all.js"></script> <script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script> <script> var KE; KindEditor.ready(function(K) { KE = K.create('#content',{ filterMode : false, //過濾HTML代碼 allowFileManager : true, //瀏覽圖片空間 afterCreate : function() { //設置編輯器創建后執行的回調函數 var self = this; //Ctrl+Enter提交表單 K.ctrl(document, 13, function() { self.sync(); K('#form')[0].submit(); }); K.ctrl(self.edit.doc, 13, function() { self.sync(); K('#form')[0].submit(); }); } }); }); </script> <form> <textarea id="content" name="content" style=" width: 99%; height: 500px; visibility: hidden; display: block; "></textarea> </form>
allowFileManager : true
true時顯示瀏覽遠程服務器按鈕,false時不顯示瀏覽遠程服務器按鈕。
默認值: false
讓KindEditor編輯器一加載完就默認在HTML代碼模式下,除了HTML代碼圖標是亮的,其它圖標都是灰色的。點擊HTML代碼圖標可切換為可視化模式。
designMode : false
true可視化模式,false代碼模式。
默認值: true
filterMode : false
true時根據 htmlTags 過濾HTML代碼,false時允許輸入任何代碼。
默認值: true
<script> var KE; KindEditor.ready(function(K) { KE = K.create('#content',{ filterMode : false }); }); </script> <textarea id="content" name="content" style=" width: 99%; height: 500px; visibility: hidden; display: block; "></textarea>
useContextmenu : true
true時使用右鍵菜單,false時屏蔽右鍵菜單。
默認值: true