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=https://www.cnblogs.com/jiyuwu/p/"~/Lib/Kindeditor/themes/default/default.css" />
<link rel="stylesheet" href=https://www.cnblogs.com/jiyuwu/p/"~/Lib/Kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src=https://www.cnblogs.com/jiyuwu/p/"~/Lib/Kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src=https://www.cnblogs.com/jiyuwu/p/"~/Lib/Kindeditor/lang/zh-CN.js"></script>
<script charset="utf-8" src=https://www.cnblogs.com/jiyuwu/p/"~/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 = https://www.cnblogs.com/jiyuwu/p/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 =https://www.cnblogs.com/jiyuwu/p/ responseStr.url;
                                            var imgTag = "<img src='https://www.cnblogs.com/jiyuwu/p/" + 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開發者提升競爭力和開發速度，建議盡早收藏該模板集合專案，

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/98061.html

標籤：.NET Core

上一篇：使用WebApi和Asp.Net Core Identity 認證 Blazor WebAssembly(Blazor客戶端應用)

下一篇：在ASP.NET Core中撰寫合格的中間件