asp.net core集成CKEditor实现图片上传功能的示例代码

本文为大家分享了asp.net core 如何集成CKEditor ，并实现图片上传功能的具体方法，供大家参考，具体内容如下。

1.visual studio 2019 开发环境

2.net core 2.0 及以上版本

1、新建asp.net core web项目

2、下载CKEditor

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

3、增加图片上传控制器

@using CompanyName.ProjectName.Web.Host.Web.Model
@model demock
@{
  ViewData["title"] = "富文本框";
  Layout = "_SimpleTable";
}
@section headers{
  @*
      .nav.nav-tabs.padding-18 {
 padding-left: 18px;
      }
      .nav-tabs {
 border-color: #c5d0dc;
 margin-bottom: 0 !important;
 margin-left: 0;
 position: relative;
 top: 1px;
      }
*@
}


  
    
      

 


   
     

     发邮件
   
 
 

   

     

     富文本编辑框
   
 
      
    
    
    
    
  

  


@section scripts{

  
  
  

}

 /// 

    /// 富文本框 上传图片
    /// 
    /// 
    [HttpPost]
    [IgnoreAuthorize]
    public IActionResult Ckupload()
    {
      uploadfile user = new uploadfile();
      var files = Request.Form.Files;
      if (files == null || files.Count == 0)
 ViewBag.cc = "no file";
      user.ShareImg = files[0];
      var contentRoot = Directory.GetCurrentDirectory();
      var webRoot = Path.Combine(contentRoot, "wwwroot");
      var parsedContentDisposition = ContentDispositionHeaderValue.Parse(user.ShareImg.ContentDisposition);
      var originalName = parsedContentDisposition.FileName.ToString().Replace(""", "");
      var ext = Path.GetExtension(Path.Combine(webRoot, originalName));
      //  if (ext != ".jpg")
      //  return Json(new { jsonrpc = "2.0", error = new { code = 101, message = "文件格式错误" }, id = "id" });
      string gid = Guid.NewGuid().ToString();
      var fileName = Path.Combine("upload", gid + ext);
      var fileName2 = "upload/" + gid + ext;
      using (var stream = new FileStream(Path.Combine(webRoot, fileName), FileMode.CreateNew))
      {
 user.ShareImg.CopyTo(stream);
      }
      string output = @"";
      string url = "http://" + Request.Host.Value;
      output = string.Format(output, Request.Query["CKEditorFuncNum"], url + "/" + fileName2);
      ViewBag.cc = output;
      return View();
    }

4、增加图片上传控制器注意返回是一个json对象，因此建了一个

简单的对象返回。

运行效果

源码地址

https://gitee.com/conanOpenSource_admin/CompanyName.ProjectName

到此这篇关于asp.net core集成CKEditor实现图片上传功能的示例代码的文章就介绍到这了,更多相关asp.net core CKEditor图片上传内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！