我用過幾個EDITOR,仍是比較喜歡KINDEDITOR。這個工做可能最近要用到了,週末在家花時間瞭解了一下。作了一下備註在這裏,以備往後方便查閱。css
1.首先去KINDEDITOR的官網下載最新的版本,而後在MVC的CONTENT文件夾下面把下載的包解壓放進去。html
2.而後看一下VIEW視圖作一下引用,顯示app
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link rel="stylesheet" href="/Content/KindEditor/themes/default/default.css" /> <script charset="utf-8" src="/Content/KindEditor/kindeditor-min.js"></script> <script charset="utf-8" src="/Content/KindEditor/lang/zh_CN.js"></script> <script> var editor; KindEditor.ready(function (K) { editor = K.create('textarea[name="txtContent"]', { resizeType: 1, uploadJson: '@Url.Action("UploadImages", "Default")' }); }); </script> </head> <body> <div> <form id="formGuestBook" method="post" action="/Default/Add"> <!--類名/方法名--> 姓名:<input type="text" id="txtName" name="txtName" /><br /> 內容: <textarea id="txtContent" name="txtContent" style="width:800px;height:400px;visibility:hidden;"></textarea> <input type="submit" name="btnSubmitGuestBook" value="提交留言" /> </form> </div> </body> </html>
3.這裏提交後給Controller後報錯,錯誤以下:post
解決很簡單,在Controller的方法前加一下[ValidateInput(false)],以下代碼所示:this
[ValidateInput(false)] public ActionResult Add(string txtName, string txtContent) { return View(); }
4.最後改自官網自帶的圖片上傳功能,原來是WEBFORM的HANDLER寫的。改爲MVC的。使用前需引用LITJSONurl
public ActionResult UploadImages() { //String aspxUrl = HttpContext.Request.Path.Substring(0, HttpContext.Request.Path.LastIndexOf("/") + 1); String aspxUrl = ""; //文件保存目錄路徑 String savePath = "/Content/KindEditor/attached/"; //文件保存目錄URL String saveUrl = aspxUrl + "/Content/KindEditor/attached/"; //定義容許上傳的文件擴展名 Hashtable extTable = new Hashtable(); extTable.Add("image", "gif,jpg,jpeg,png,bmp"); extTable.Add("flash", "swf,flv"); extTable.Add("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb"); extTable.Add("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"); //最大文件大小 int maxSize = 1000000; //this.context = HttpContext; HttpPostedFileBase imgFile = HttpContext.Request.Files["imgFile"]; if (imgFile == null) { showError("請選擇文件。"); } String dirPath = HttpContext.Server.MapPath(savePath); if (!Directory.Exists(dirPath)) { showError("上傳目錄不存在。"); } String dirName = HttpContext.Request.QueryString["dir"]; if (String.IsNullOrEmpty(dirName)) { dirName = "image"; } if (!extTable.ContainsKey(dirName)) { showError("目錄名不正確。"); } String fileName = imgFile.FileName; String fileExt = Path.GetExtension(fileName).ToLower(); if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize) { showError("上傳文件大小超過限制。"); } if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(((String)extTable[dirName]).Split(','), fileExt.Substring(1).ToLower()) == -1) { showError("上傳文件擴展名是不容許的擴展名。\n只容許" + ((String)extTable[dirName]) + "格式。"); } //建立文件夾 dirPath += dirName + "/"; saveUrl += dirName + "/"; if (!Directory.Exists(dirPath)) { Directory.CreateDirectory(dirPath); } String ymd = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo); dirPath += ymd + "/"; saveUrl += ymd + "/"; if (!Directory.Exists(dirPath)) { Directory.CreateDirectory(dirPath); } String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt; String filePath = dirPath + newFileName; imgFile.SaveAs(filePath); String fileUrl = saveUrl + newFileName; Hashtable hash = new Hashtable(); hash["error"] = 0; hash["url"] = fileUrl; return Content(JsonMapper.ToJson(hash)); //return View(); } private ContentResult showError(string message) { Hashtable hash = new Hashtable(); hash["error"] = 1; hash["message"] = message; return Content(JsonMapper.ToJson(hash)); }