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/KindSaveFiles?Title=@Html.Raw(Model.Title)&ContextId=@Model.Id',
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&Title=@Html.Raw(Model.Title)&ContextId=@Model.Id',
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 Kindeditor
private 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参数，设置各路径和URL
String 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 type
String 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

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

实现后效果如图：

开源地址 动动小手，点个推荐吧！

注意：我们机遇屋该项目将长期为大家提供asp.net core各种好用demo，旨在帮助.net开发者提升竞争力和开发速度，建议尽早收藏该模板集合项目。