怎么在asp.net core中利用CKEditor实现一个图片上传功能
创始人
2024-12-28 08:23:21
0次

准备工作

1.visual studio 2019 开发环境

2.net core 2.0 及以上版本

实现方法

1、新建asp.net core web项目

怎么在asp.net core中利用CKEditor实现一个图片上传功能

2、下载CKEditor

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

怎么在asp.net core中利用CKEditor实现一个图片上传功能

3、增加图片上传控制器

@using CompanyName.ProjectName.Web.Host.Web.Model
@model demock
@{
  ViewData["title"] = "富文本框";
  Layout = "_SimpleTable";
}
@section headers{
  @**@
}


  
    
      
        
  •                                     发邮件                    
  •                                              富文本编辑框                                
                                             
    富文本编辑器
              

            
                                    内容                            @Html.EditorFor(model => model.rules)               @**@                                        
                          保存       
           
       @section scripts{            //editor.document.getBody().getText(); //取得纯文本   //editor.document.getBody().getHtml(); //取得html文本   //var editor = CKEDITOR.replace('Text',   //{   //  toolbar: "Full",   //  filebrowserUploadUrl: "/Image/ckupload?type=File", //开启文件上传(此项会同时开启图片和FLASH上传)   //  filebrowserImageUploadUrl: "/Image/ckupload?type=Images", // 开启图片上传   //  filebrowserFlashUploadUrl: "/Image/ckupload?type=Flash" //开启FLASH上传   //});     $.base64.utf8encode = true;   var editor2 = CKEDITOR.replace('rules',     {       toolbar: "Full",       filebrowserUploadUrl: "/Image/ckupload?type=File", //开启文件上传(此项会同时开启图片和FLASH上传)       filebrowserImageUploadUrl: "/Image/ckupload?type=Images", // 开启图片上传       filebrowserFlashUploadUrl: "/Image/ckupload?type=Flash" //开启FLASH上传     });   $(function () {     editor2.setData("@(Html.Raw(Model.rules))");   });   $("#btnSave").click(function (ev) {     var a = editor2.document.getBody().getHtml();     $("#rules").val( $.base64.btoa(a) );     var $form = $("#form1");     editor2.setData(a);     $.ajax({       url: "/demo/ck/",       data: $form.serialize(),       type: "POST",       cache: false,       async: false,       beforeSend: function () {         $("#btnSave").attr("disabled", "disabled");       },       success: function (r) {        // if (r.isSucceeded == true) {           // location.href = r.goBackUrl;// "/Employee/index?ram=" + Math.random();// r.GoBackUrl;         // }        // else // 其他问题        //  {           alert( $.base64.atob(r.message, true));       //  }         $("#btnSave").removeAttr("disabled");       },       error: function () {         alert("保存失败");         $("#btnSave").removeAttr("disabled");       }     });    //  alert(editor2.document.getBody().getHtml());     // return;     //$.post("/demo/ck/",     //  {     //    Text: editor2.document.getBody().getHtml(),     //  },     //  function (data, status) {     //     alert("Data: " + data + "\nStatus: " + status);     //  });   }); }
     /// 
        /// 富文本框 上传图片
        /// 
        /// 
        [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 = @"window.parent.CKEDITOR.tools.callFunction({0} ,'{1}');";
          string url = "http://" + Request.Host.Value;
          output = string.Format(output, Request.Query["CKEditorFuncNum"], url + "/" + fileName2);
          ViewBag.cc = output;
          return View();
        }

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

    简单的对象返回。

    运行效果

    怎么在asp.net core中利用CKEditor实现一个图片上传功能

    怎么在asp.net core中利用CKEditor实现一个图片上传功能

    相关内容

    热门资讯

    空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
    空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
    格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
    空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
    格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
    品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
    空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
    空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
    中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
    中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...