朋友炒股兩個月賺了10萬，我幫他推廣一下公眾號，把錢用來投資總比放銀行連通貨膨脹都跑不過里強， 硬核離職，在家炒股 ，這是他每天的日志，有些經驗是花錢也買不到的。
ExtJs自帶的編輯器沒有圖片上傳的功能，大部分時候能夠滿足我們的需要。
但有時候這個功能還是需要的。我在這里對keeditor進行了整合。
首先要下載keeditor和上傳時需要引用的LitJson.dll。由於ke的版本不同，我這里提供的下載文件只適用於當前整合代碼，供參考。
1.代碼如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <!--ExtJs框架開始--> 6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script> 7 <script type="text/javascript" src="/Ext/ext-all.js"></script> 8 <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" /> 10 <!--ExtJs框架結束--> 11 <!--添加KeEditor的引用開始--> 12 <script src="/kindeditor/kindeditor.js" type="text/javascript"></script> 13 <!--添加KeEditor的引用結束--> 14 <script type="text/javascript"> 15 Ext.onReady(function () { 16 //初始化標簽中的Ext:Qtip屬性。 17 Ext.QuickTips.init(); 18 Ext.form.Field.prototype.msgTarget = 'side'; 19 20 //創建文本上傳域 21 var exteditor = new Ext.form.HtmlEditor({ 22 fieldLabel: '員工描述' 23 }); 24 //整合KE編輯器 25 var keeditor = new Ext.form.TextArea({ 26 id: 'keeditor', 27 fieldLabel: '員工描述', 28 width: 700, 29 height: 200 30 }); 31 32 //表單 33 var form = new Ext.form.FormPanel({ 34 frame: true, 35 title: '表單標題', 36 style: 'margin:10px', 37 items: [exteditor, keeditor], 38 listeners: { 39 'render': function () { 40 KE.show({ 41 id: 'keeditor', 42 imageUploadJson: '/App_Ashx/Upload.ashx' 43 }); 44 setTimeout("KE.create('keeditor');", 1000); 45 } 46 } 47 }); 48 //窗體 49 var win = new Ext.Window({ 50 title: '窗口', 51 width: 900, 52 height: 700, 53 resizable: true, 54 modal: true, 55 closable: true, 56 maximizable: true, 57 minimizable: true, 58 buttonAlign: 'center', 59 items: form 60 }); 61 win.show(); 62 }); 63 </script> 64 </head> 65 <body> 66 <!-- 67 說明： 68 (1) var exteditor = new Ext.form.HtmlEditor():創建一個新的html編輯器。 69 (2) var keeditor = new Ext.form.TextArea()：創建一個新的TextArea。 70 (3) listeners: { 71 'render': function () { 72 KE.show({ 73 id: 'keeditor', 74 imageUploadJson: '/App_Ashx/Upload.ashx' 75 }); 76 setTimeout("KE.create('keeditor');", 1000); 77 } 78 } 79 監聽表單的 render 事件，創建 KE Editor.(2)，(3)中的id 要統一，否則無法顯示。 80 imageUploadJson: '/App_Ashx/Upload.ashx'，keeditor上傳圖片的后台執行文件 81 --> 82 </body> 83 </html>
其中與service交互用上傳圖片的 一般處理程序文件，源碼如下：
/App_Ashx/Upload.ashx
1 using System; 2 using System.Collections.Generic; 3 using System.Collections; 4 using System.IO; 5 using System.Web; 6 using System.Globalization; 7 using LitJson; 8 9 namespace HZYT.ExtJs.WebSite.App_Ashx 10 { 11 /// <summary> 12 /// Upload 的摘要說明 13 /// </summary> 14 public class Upload : IHttpHandler 15 { 16 //文件保存目錄路徑 17 private string savePath = App_Code.Constant.UPLOADIMAGEPATH; 18 //文件保存目錄URL 19 private string saveUrl = App_Code.Constant.UPLOADIMAGEPATH; 20 //定義允許上傳的文件擴展名 21 private String fileTypes = "gif,jpg,jpeg,png,bmp"; 22 //最大文件大小 23 private int maxSize = 1000000; 24 25 private HttpContext context; 26 27 public void ProcessRequest(HttpContext context) 28 { 29 this.context = context; 30 31 HttpPostedFile imgFile = context.Request.Files["imgFile"]; 32 if (imgFile == null) 33 { 34 showError("請選擇文件。"); 35 } 36 37 String dirPath = context.Server.MapPath(savePath); 38 if (!Directory.Exists(dirPath)) 39 { 40 showError("上傳目錄不存在。"); 41 } 42 43 String fileName = imgFile.FileName; 44 String fileExt = Path.GetExtension(fileName).ToLower(); 45 ArrayList fileTypeList = ArrayList.Adapter(fileTypes.Split(',')); 46 47 if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize) 48 { 49 showError("上傳文件大小超過限制。"); 50 } 51 52 if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1) 53 { 54 showError("上傳文件擴展名是不允許的擴展名。"); 55 } 56 57 String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt; 58 String filePath = dirPath + newFileName; 59 60 imgFile.SaveAs(filePath); 61 62 String fileUrl = saveUrl + newFileName; 63 64 Hashtable hash = new Hashtable(); 65 hash["error"] = 0; 66 hash["url"] = fileUrl; 67 context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8"); 68 context.Response.Write(JsonMapper.ToJson(hash)); 69 context.Response.End(); 70 } 71 72 private void showError(string message) 73 { 74 Hashtable hash = new Hashtable(); 75 hash["error"] = 1; 76 hash["message"] = message; 77 context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8"); 78 context.Response.Write(JsonMapper.ToJson(hash)); 79 context.Response.End(); 80 } 81 82 public bool IsReusable 83 { 84 get 85 { 86 return true; 87 } 88 } 89 } 90 }
2.效果如下：
文件下載: