How does asp.net core integrate kindeditor and implement Image Upload,

How does asp.net core integrate kindeditor and implement Image Upload,

Preparations

1. visual studio 2015 update3 Development Environment

2. net core 1.0.1 and later versions

Directory

Create an asp.net core web Project

Download kindeditor

Added an Image Upload controller.

Configure the kindeditor Parameter

Code download

 

Create an asp.net core web Project

Create an asp.net core project named kindeditor

 

 

Select a web application

 

 

Download kindeditor

Here we have created a sample project that comes with the system, download a version from the official website of kindeditor, decompress it, and copy the large wwwroot file.

Modify views/index. cshtml

@ {ViewData ["Title"] = "Home Page" ;}< link href = "~ /Kindeditor/themes/default/default.css "rel =" stylesheet "/> <script src = "~ /Kindeditor/kindeditor-min.js "> </script> <script src = "~ /Kindeditor/lang/zh_CN.js "> </script> <div class =" row "> <textarea id =" detail_desc "name =" detail_desc "style =" width: 700px; height: 300px; "> </textarea> </div> <script type =" text/javascript "> // instantiate the editor. // we recommend that you use the factory method getEditor to create and reference an editor instance, if you reference this editor under a closure, you can directly call UE. getEditor ('editor') can get the relevant instance KindEditor. ready (function (K) {window. editor = K. create ('# detail_desc', {width: '000000', height: '500px '}) ;}); </script>

 

Now you can see that kindeditor has been integrated.

Added an Image Upload controller.

Note that the return is a json object, so a simple object is created to return.

Using System; using System. collections. generic; using System. linq; using System. threading. tasks; using Microsoft. aspNetCore. mvc; using Microsoft. aspNetCore. http; using Microsoft. net. http. headers; using Microsoft. aspNetCore. hosting; using System. IO; namespace kindeditortest. controllers {public class HomeController: Controller {private IHostingEnvironment hostingEnv; public IActionResult Index () {return View ();} public HomeController (IHostingEnvironment env) {this. hostingEnv = env ;} /// <summary> /// Kindeditor Image Upload /// </summary> /// The name Of The Kindeditor image upload function, the name cannot be changed </param> /// <param name = "dir"> the name cannot be changed. dir </param> /// <returns> </returns> public is not used here. IActionResult KindeditorPicUpload (IList <IFormFile> imgFile, string dir) {PicUploadResponse rspJson = new PicUploadResponse () {error = 0, url = "/upload/"}; long size = 0; string tempname = ""; foreach (var file in imgFile) {var filename = ContentDispositionHeaderValue. parse (file. contentDisposition ). fileName. trim ('"'); var extname = filename. substring (filename. lastIndexOf (". "), filename. length-filename. lastIndexOf (". "); var filename1 = System. guid. newGuid (). toString () + extname; tempname = filename1; var path = hostingEnv. webRootPath; filename = hostingEnv. webRootPath + $ @ "\ upload \ {filename1}"; size + = file. length; using (FileStream fs = System. IO. file. create (filename) {file. copyTo (fs); fs. flush (); // here is the business logic} rspJson. error = 0; rspJson. url = $ @".. /.. /upload/"+ tempname; return Json (rspJson);} public IActionResult About () {ViewData [" Message "] =" Your application description page. "; return View ();} public IActionResult Contact () {ViewData [" Message "] =" Your contact page. "; return View () ;}public IActionResult Error () {return View () ;}} public class PicUploadResponse {public int error {get; set ;}public string url {get; set ;}}}

 

 

Configure the kindeditor Parameter

<Script type = "text/javascript"> // instantiate editor // we recommend that you use the factory method getEditor to create and reference editor instances. If you reference this editor under a closure, you can directly call UE. getEditor ('editor') can get the relevant instance KindEditor. ready (function (K) {window. editor = K. create ('# detail_desc', {width: '000000', height: '500px ', uploadJson:'/home/KindeditorPicUpload ', fileManagerJson:'/home/KindeditorPicUpload ', allowFileManager: true}) ;}); </script>

 

Running Effect

Code download

URL: http://pan.baidu.com/s/1eS6y8QQ password: v7ur