asp.net core integrates kindeditor to implement image upload function

This article shares with you the specific method of how asp.net core integrates kindeditor and implements the image upload function for your reference. The specific content is as follows

Preparation work

1.visual studio 2015 update3 development environment

2.net core 1.0 .1 and above version

Directory

New asp.net core web project

Download kindeditor

Add image upload controller

Configure kindeditor parameters

Code download

New asp.net core web project

Create a new one asp.net core project, here named kindeditor

Select the web application

Download kindeditor

Here we have created a new sample project that comes with the system, go to the kindeditor official website to download a version, unzip and copy In the big wwwroot

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">
 //实例化编辑器
 //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor(&#39;editor&#39;)就能拿到相关的实例
 KindEditor.ready(function (K) {
  window.editor = K.create(&#39;#detail_desc&#39;, {
   width: &#39;98%&#39;,
   height: &#39;500px&#39;
  });
 }); 
</script>

run it and now you can see that kindeditor has been integrated.

Add image upload controller

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

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图片上传
  /// </summary>
 /// <param name="imgFile">Kindeditor图片上传自带的命名，不可更改名称</param>
 /// <param name="dir">不可更改名称 这里没有用到dir</param>
 /// <returns></returns>
 public 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(&#39;"&#39;);
    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();
     //这里是业务逻辑
    }
   }
   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; }
 }
}

Configuring kindeditor parameters

<script type="text/javascript">
 //实例化编辑器
 //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor(&#39;editor&#39;)就能拿到相关的实例
 KindEditor.ready(function (K) {
  window.editor = K.create(&#39;#detail_desc&#39;, {
   width: &#39;98%&#39;,
   height: &#39;500px&#39;,
   uploadJson: &#39;/home/KindeditorPicUpload&#39;,
   fileManagerJson: &#39;/home/KindeditorPicUpload&#39;,
   allowFileManager: true
  });
 });
</script>

Operation effect

The above is the entire content of this article. I hope it will be helpful to everyone's learning, and I hope everyone will support the PHP Chinese website.