CKEditor上传插件
前言
以下分步具体解释三部分的实现：浏览server端图片或文件。上传图片或文件，CKEditor配置。
浏览server端图片或文件
public ActionResult Browse() { var type = Request.QueryString["Type"]; var isImage = !string.IsNullOrEmpty(type) && type.Equals("Images", StringComparison.InvariantCultureIgnoreCase); ViewBag.IsImg = isImage; return View(); } 不是ASP.NET MVC的用户。就把它当成是页面载入。 @{ Layout = null;} Browse @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/modernizr") @if (!string.IsNullOrEmpty(Request.QueryString["folderpath"])) { @{ var imgTypes = new[] {".jpg", ".gif", ".png"}; } @foreach (var file in Directory.GetFiles(Server.MapPath("/" + Request.QueryString["folderpath"]))) { if ((bool) ViewBag.IsImg && imgTypes.Contains(Path.GetExtension(file.ToLower()))) { 
- @Path.GetFileName(file)
} }
} 页面引用了JQUERY，树状菜单部分是jquery的treeview插件，可自行GOOGLE。也可留言，我email给你。 #region = SafeAddQueryToURL = ////// Add a query to an URL. /// if the URL has not any query,then append the query key and value to it. /// if the URL has some queries, then check it if exists the query key already,replace the value, or append the key and value /// if the URL has any fragment, append fragments to the URL end. /// ////// string s = "http://blog.csdn.net/leewhoee/?
a=1&b=2&c=3#tag"; /// WL(SafeRemoveQueryFromURL("a",s)); /// WL(SafeRemoveQueryFromURL("b",s)); /// WL(SafeRemoveQueryFromURL("c",s)); /// WL(SafeAddQueryToURL("d","new",s)); /// WL(SafeAddQueryToURL("a","newvalue",s)); /// 输出例如以下: /// http://blog.csdn.net/leewhoee/?b=2&c=3#tag /// http://blog.csdn.net/leewhoee/?a=1&c=3#tag /// http://blog.csdn.net/leewhoee/?a=1&b=2#tag /// http://blog.csdn.net/leewhoee/?
a=1&b=2&c=3&d=new#tag /// http://blog.csdn.net/leewhoee/?a=newvalue&b=2&c=3#tag /// </example> public static string SafeAddQueryToURL(string key, string value, string url) { int fragPos = url.LastIndexOf("#"); string fragment = string.Empty; if (fragPos > -1) { fragment = url.Substring(fragPos); url = url.Substring(0, fragPos); } int querystart = url.IndexOf("?"); if (querystart < 0) { url += "?" + key + "=" + value; } else { Regex reg = new Regex(@"(?<=[&\?])" + key + @"=[^\s&#]*", RegexOptions.Compiled); if (reg.IsMatch(url)) url = reg.Replace(url, key + "=" + value); else url += "&" + key + "=" + value; } return url + fragment; } #endregion #region = SafeRemoveQueryFromURL = /// <summary> /// Remove a query from url /// </summary> /// <param name="key"></param> /// <param name="url"></param> /// <returns></returns> public static string SafeRemoveQueryFromURL(string key, string url) { Regex reg = new Regex(@"[&\?
]" + key + @"=[^\s&#]*&?", RegexOptions.Compiled); return reg.Replace(url, new MatchEvaluator(PutAwayGarbageFromURL)); } private static string PutAwayGarbageFromURL(Match match) { string value = match.Value; if (value.EndsWith("&")) return value.Substring(0, 1); else return string.Empty; } #endregion
致此，“浏览server端图片或文件”部分就完毕了。上传图片或文件
[HttpPost] public ActionResult FileUpload() { var ckEditorFuncNum = Request.QueryString["CKEditorFuncNum"]; var type = Request.QueryString["Type"]; var isImage = !string.IsNullOrEmpty(type) && type.Equals("Images", StringComparison.InvariantCultureIgnoreCase); var maxContentLength = isImage ? 512*1024 : 1024*1024; var file = Request.Files["upload"]; if (file == null) { return Content("No file has been chosen!"); } if (file.ContentLength > maxContentLength) { return Content("The image file size should be no bigger than 512KB! The document file size should be no bigger than 1024KB!"); } var urlpath = string.Empty; var datestamp = DateTime.Now.ToString("MMddyyyy"); var rootfolderpath = isImage ? "/Images/" : "/docs/"; var folderpath = Server.MapPath(rootfolderpath) + datestamp; if (file.ContentLength > 0) { var filename = Path.GetFileNameWithoutExtension(file.FileName); var fileextension = Path.GetExtension(file.FileName); var timestamp = DateTime.Now.ToString("MMddyyyyHHmmssfff"); var filepath = string.Format("{0}/{1}{2}{3}", folderpath, filename, timestamp, fileextension); urlpath = string.Format("{4}{0}/{1}{2}{3}", datestamp, filename, timestamp, fileextension, rootfolderpath); if (!Directory.Exists(folderpath)) { Directory.CreateDirectory(folderpath); } file.SaveAs(filepath); } return Content( string.Format( @"", ckEditorFuncNum, urlpath)); } 假设你不懂ASP.NET MVC，以下做一些简单的解释。[HttpPost]表明仅仅处理POST请求，return Content("")是返回一个纯文本字符串，其他部分大同小异。唯一值得注意的是最后返回了一段javascript脚本给CKEditor。它促使窗体跳转到Image Info选项卡并把图片URL传递过去，然后预览。例如以下图： 
CKEditor配置
/** * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.html or http://ckeditor.com/license */CKEDITOR.editorConfig = function (config) { config.extraPlugins = "autogrow,imagebrowser,filebrowser"; /*config autogrow*/ config.autoGrow_maxHeight = 400; /*config autogrow end*/ /*config imagebrowser*/ //config.imageBrowser_listUrl = ""; /*config imagebrowser end*/ /*config filebrowser*/ config.filebrowserImageBrowseUrl = '/SHTracker/CKEditor/Browse?type=Images'; config.filebrowserImageUploadUrl = '/SHTracker/CKEditor/FileUpload? type=Images'; config.filebrowserBrowseUrl = '/SHTracker/CKEditor/Browse?type=docs'; config.filebrowserUploadUrl = '/SHTracker/CKEditor/FileUpload?type=docs'; config.filebrowserImageWindowWidth = 640; config.filebrowserImageWindowHeight = 480; /*config filebrowser end*/ // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E'; config.skin = 'Moono'; config.disableNativeSpellChecker = false; };
extraPlugins里设置了imagebrowser图片浏览和filebrowser文件浏览。然后为其配置处理请求的URL:config.filebrowserImageBrowseUrl = '/SHTracker/CKEditor/Browse?type=Images'; config.filebrowserImageUploadUrl = '/SHTracker/CKEditor/FileUpload?
type=Images'; config.filebrowserBrowseUrl = '/SHTracker/CKEditor/Browse?
type=docs'; config.filebrowserUploadUrl = '/SHTracker/CKEditor/FileUpload?type=docs';
请确保你的URL能够正确訪问。此时。这个CKEditor的文件图片上传插件就完毕了。总结
自已从零開始开发一个富文该编辑器？重复-create家庭的车轮，很少有人愿意去做？我们希望帮助人们谁有需求，假设花钱，请顶一下，非常感谢~~