asp.net core 如何集成kindeditor并实现图片上传功能

 准备工作

1.visual studio 2015 update3开发环境

2.net core 1.0.1 及以上版本

 目录

新建asp.net core web项目

下载kindeditor

增加图片上传控制器

配置kindeditor参数

代码下载

新建asp.net core web项目

新建一个asp.net core项目，这里命名为kindeditor

选中web应用程序

 下载kindeditor

这里我们新建了一个系统自带的样本项目，去 kindeditor官网下载一个版本，解压后拷贝大wwwroot中

修改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('editor')就能拿到相关的实例
    KindEditor.ready(function (K) {
        window.editor = K.create('#detail_desc', {
            width: '98%',
            height: '500px'
        });
    });
</script>

运行一下现在就可以看到kindeditor已经集成进来了。

 增加图片上传控制器

注意返回是一个json对象，因此建了一个简单的对象返回。

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 = , url = "/upload/" };
            long size = ;
            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();
                    //这里是业务逻辑
                }
            }
            rspJson.error = ;
            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; }
    }
}

 

 配置kindeditor参数

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

 运行效果

 代码下载

链接: http://pan.baidu.com/s/1eS6y8QQ 密码: v7ur