Asp.Net Core中配置使用Kindeditor富文本编辑器实现图片上传和截图上传及文件管理和上传（开源代码.net core3.0）

KindEditor使用JavaScript编写，可以无缝的于Java、.NET、PHP、ASP等程序接合。 KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用，2006年7月首次发布2.0以来，KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率，目前在国内已经成为最受欢迎的编辑器之一。

然而很多人缺为在Asp.Net Core中的使用在发愁，于是这个开源Demo就这样产生了，那么我现在给各位介绍下它的快速使用吧！

一、前端配置

1.首先引用相关文件

<link rel=\"stylesheet\" href=\"~/Lib/Kindeditor/themes/default/default.css\" /><link rel=\"stylesheet\" href=\"~/Lib/Kindeditor/plugins/code/prettify.css\" /><script charset=\"utf-8\" src=\"~/Lib/Kindeditor/kindeditor-all.js\"></script><script charset=\"utf-8\" src=\"~/Lib/Kindeditor/lang/zh-CN.js\"></script><script charset=\"utf-8\" src=\"~/Lib/Kindeditor/plugins/code/prettify.js\"></script>

2.建立编辑器标签（已有的数据直接渲染在标签内即可加载至编辑器）

<textarea name=\"content\" style=\"width:100%;height:450px;\" id=\"MyEidtor\">@Html.Raw(Model.Context)</textarea>

3.初始化编辑器，并配置图片及文件管理、上传

KindEditor.ready(function (K) {window.editor = K.create(\'#MyEidtor\', {uploadJson: \'../../Editor/[email protected](Model.Title)&[email protected]\',fileManagerJson: \'@Url.Action(\"KindFileManager\", \"Editor\")\',allowFileManager: true,autoHeightMode : true,afterCreate: function () {var editerDoc = this.edit.doc;//得到编辑器的文档对象//监听粘贴事件, 包括右键粘贴和ctrl+v$(editerDoc).bind(\'paste\', null, function (e) {var ele = e.originalEvent.clipboardData.items;for (var i = 0; i < ele.length; ++i) {//判断文件类型if (ele[i].kind == \'file\' && ele[i].type.indexOf(\'image/\') !== -1) {var file = ele[i].getAsFile();//得到二进制数据//创建表单对象，建立name=value的表单数据。var formData = new FormData();formData.append(\"imgFile\", file);//name,value//用jquery Ajax 上传二进制数据$.ajax({url: \'../../Editor/KindSaveFiles?dir=image&[email protected](Model.Title)&[email protected]\',type: \'POST\',data: formData,// 告诉jQuery不要去处理发送的数据processData: false,// 告诉jQuery不要去设置Content-Type请求头contentType: false,dataType: \"json\",beforeSend: function () {//console.log(\"正在进行，请稍候\");},success: function (responseStr) {//上传完之后，生成图片标签回显图片，假定服务器返回url。var src = responseStr.url;var imgTag = \"<img src=\'\" + src + \"\' border=\'0\'/>\";//console.info(imgTag);//kindeditor提供了一个在焦点位置插入HTML的函数，调用此函数即可。editor.insertHtml(imgTag);},error: function (responseStr) {console.log(\"error\");}});}}})}});});

4.获取数据保存

function btnSave() {alert(window.editor.html());//获取了数据，保存就没问题了吧！}

二、后台配置接收文件处理并返回预定格式的json数据

#region Kindeditorprivate string KindStr = \"Kind\";//前缀文件名，可自行修改public IActionResult Kindeditor(){Article article = new Article();article.Context = \"这是编辑器测试数据！\";article.Id = 1;article.Title = \"测试\";return View(article);}public async Task<IActionResult> KindSaveFiles(string dir, string Title, long ContextId = 0, long ArticleTypeId = 0){if (Request.Form.Files.Count() == 0){return showError(\"请选择上传的文件\");}var file = Request.Form.Files[0];//kindeditor的上传文件控件，一次只传一个文件//定义允许上传的文件扩展名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,mp4\");extTable.Add(\"file\", \"doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2\");if (String.IsNullOrEmpty(dir)){dir = \"image\";}string fName = \"\";string fileName = \"\";string md5 = CommonHelper.CalcMD5(file.OpenReadStream());String fileExt = Path.GetExtension(file.FileName).ToLower();if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(((String)extTable[dir]).Split(\',\'), fileExt.Substring(1).ToLower()) == -1){return showError(\"上传文件扩展名是不允许的扩展名。\\n只允许\" + ((String)extTable[dir]) + \"格式。\");}//创建文件夹string dirPath = ConfigHelper.GetSectionValue(\"FileMap:FilePath\") + \"\\\\\"+ KindStr + \"\\\\\" + dir + \"\\\\\";string webPath = \"/\" + KindStr + \"/\" + dir + \"/\";if (!Directory.Exists(dirPath)){Directory.CreateDirectory(dirPath);}String ymd = DateTime.Now.ToString(\"yyyyMMdd\", DateTimeFormatInfo.InvariantInfo);dirPath += ymd + \"\\\\\";webPath += ymd + \"/\";if (!Directory.Exists(dirPath)){Directory.CreateDirectory(dirPath);}string suijishu = Math.Abs(Guid.NewGuid().GetHashCode()).ToString();String newFileName = DateTime.Now.ToString(\"yyyyMMddHHmmss_\" + suijishu, DateTimeFormatInfo.InvariantInfo) + fileExt;fileName = dirPath + $@\"{newFileName}\";using (FileStream fs = System.IO.File.Create(fileName)){await file.CopyToAsync(fs);fs.Flush();}fName = ConfigHelper.GetSectionValue(\"FileMap:FileWeb\") + webPath + newFileName;Hashtable hash = new Hashtable();hash[\"error\"] = 0;hash[\"url\"] = fName;return Json(hash);}[NonAction]private IActionResult showError(string message){Hashtable hash = new Hashtable();hash[\"error\"] = 1;hash[\"message\"] = message;return Json(hash);}public IActionResult KindFileManager(){String rootUrl = \"/\"+ KindStr + \"/\";//图片扩展名String fileTypes = \"gif,jpg,jpeg,png,bmp\";String currentPath = \"\";String currentUrl = \"\";String currentDirPath = \"\";String moveupDirPath = \"\";String dirPath = ConfigHelper.GetSectionValue(\"FileMap:FilePath\") + \"\\\\Kind\" + \"\\\\\";String dirName = Request.Query[\"dir\"];if (!String.IsNullOrEmpty(dirName)){if (Array.IndexOf(\"image,flash,media,file\".Split(\',\'), dirName) == -1){return showError(\"目录错误\");}dirPath += dirName + \"/\";rootUrl += dirName + \"/\";if (!Directory.Exists(dirPath)){Directory.CreateDirectory(dirPath);}}//根据path参数，设置各路径和URLString path = Request.Query[\"path\"];path = String.IsNullOrEmpty(path) ? \"\" : path;if (path == \"\"){currentPath = dirPath;currentUrl = rootUrl;currentDirPath = \"\";moveupDirPath = \"\";}else{currentPath = dirPath + path;currentUrl = rootUrl + path;currentDirPath = path;moveupDirPath = Regex.Replace(currentDirPath, @\"(.*?)[^\\/]+\\/$\", \"$1\");}//排序形式，name or size or typeString order = Request.Query[\"order\"];order = String.IsNullOrEmpty(order) ? \"\" : order.ToLower();//不允许使用..移动到上一级目录if (Regex.IsMatch(path, @\"\\.\\.\")){return showError(\"Access is not allowed.\");}//最后一个字符不是/if (path != \"\" && !path.EndsWith(\"/\")){return showError(\"Parameter is not valid.\");}//目录不存在或不是目录if (!Directory.Exists(currentPath)){return showError(\"Directory does not exist.\");}//遍历目录取得文件信息string[] dirList = Directory.GetDirectories(currentPath);string[] fileList = Directory.GetFiles(currentPath);switch (order){case \"size\":Array.Sort(dirList, new NameSorter());Array.Sort(fileList, new SizeSorter());break;case \"type\":Array.Sort(dirList, new NameSorter());Array.Sort(fileList, new TypeSorter());break;case \"name\":default:Array.Sort(dirList, new NameSorter());Array.Sort(fileList, new NameSorter());break;}Hashtable result = new Hashtable();result[\"moveup_dir_path\"] = moveupDirPath;result[\"current_dir_path\"] = currentDirPath;result[\"current_url\"] = currentUrl;result[\"total_count\"] = dirList.Length + fileList.Length;List<Hashtable> dirFileList = new List<Hashtable>();result[\"file_list\"] = dirFileList;for (int i = 0; i < dirList.Length; i++){DirectoryInfo dir = new DirectoryInfo(dirList[i]);Hashtable hash = new Hashtable();hash[\"is_dir\"] = true;hash[\"has_file\"] = (dir.GetFileSystemInfos().Length > 0);hash[\"filesize\"] = 0;hash[\"is_photo\"] = false;hash[\"filetype\"] = \"\";hash[\"filename\"] = dir.Name;hash[\"datetime\"] = dir.LastWriteTime.ToString(\"yyyy-MM-dd HH:mm:ss\");dirFileList.Add(hash);}for (int i = 0; i < fileList.Length; i++){FileInfo file = new FileInfo(fileList[i]);Hashtable hash = new Hashtable();hash[\"is_dir\"] = false;hash[\"has_file\"] = false;hash[\"filesize\"] = file.Length;hash[\"is_photo\"] = (Array.IndexOf(fileTypes.Split(\',\'), file.Extension.Substring(1).ToLower()) >= 0);hash[\"filetype\"] = file.Extension.Substring(1);hash[\"filename\"] = file.Name;hash[\"datetime\"] = file.LastWriteTime.ToString(\"yyyy-MM-dd HH:mm:ss\");dirFileList.Add(hash);}return Json(result);}public class NameSorter : IComparer{public int Compare(object x, object y){if (x == null && y == null){return 0;}if (x == null){return -1;}if (y == null){return 1;}FileInfo xInfo = new FileInfo(x.ToString());FileInfo yInfo = new FileInfo(y.ToString());return xInfo.FullName.CompareTo(yInfo.FullName);}}public class SizeSorter : IComparer{public int Compare(object x, object y){if (x == null && y == null){return 0;}if (x == null){return -1;}if (y == null){return 1;}FileInfo xInfo = new FileInfo(x.ToString());FileInfo yInfo = new FileInfo(y.ToString());return xInfo.Length.CompareTo(yInfo.Length);}}public class TypeSorter : IComparer{public int Compare(object x, object y){if (x == null && y == null){return 0;}if (x == null){return -1;}if (y == null){return 1;}FileInfo xInfo = new FileInfo(x.ToString());FileInfo yInfo = new FileInfo(y.ToString());return xInfo.Extension.CompareTo(yInfo.Extension);}}#endregion

其中文件读取不明白的可以参考我之前的博客

实现后效果如图：