背景

本文為大家分享了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"; } @p headers{@*<style>.nav.nav-tabs.padding-18 {padding-left: 18px;}.nav-tabs {border-color: #c5d0dc;margin-bottom: 0 !important;margin-left: 0;position: relative;top: 1px;} </style>*@ }<p class="content"><div class="box box-primary"><div class="box-header with-border"><ul class="nav nav-tabs padding-18"><li><a href="/demo/sendmail"><i class="orange ace-icon fa fa-cog bigger-120"></i>發郵件</a></li><li class="active"><a href="javascript:void(0);"><i class="green ace-icon fa fa-home bigger-120"></i>富文本編輯框</a></li></ul></div><!-- /.box-header --><!-- form start --><form role="form" id="form1"><div class="box-body"><div class="callout callout-success"><h4>富文本編輯器</h4><p></p></div><table class="form"><tr><th class="formTitle">內容</th><td class="formValue">@Html.EditorFor(model => model.rules)@*<textarea class="form-control" name="Text" id="Text" style="height: 70px;" placeholder=""></textarea>*@</td></tr></table></div><!-- /.box-body --><div class="box-footer"><button type="button" id="btnSave" class="btn btn-success">保存</button></div></form></div><!-- /.tab-content --> </p>@p scripts{<script src="~/ckeditor/ckeditor.js"></script><script src="~/js/jquery.base64.js"></script><script type="text/javascript">//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);// });}); </script>}/// <summary>/// 富文本框 上傳圖片/// </summary>/// <returns></returns>[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 = @"<script type=""text/javascript"">window.parent.CKEDITOR.tools.callFunction({0} ,'{1}');</script>";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实现图片上传功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。