asp.net core集成CKEditor實(shí)現(xiàn)圖片上傳功能的示例代碼
背景
本文為大家分享了asp.net core 如何集成CKEditor ,并實(shí)現(xiàn)圖片上傳功能的具體方法,供大家參考,具體內(nèi)容如下。
準(zhǔn)備工作
1.visual studio 2019 開發(fā)環(huán)境
2.net core 2.0 及以上版本
實(shí)現(xiàn)方法
1、新建asp.net core web項(xiàng)目
2、下載CKEditor
這里我們新建了一個系統(tǒng)自帶的樣本項(xiàng)目,去 CKEditor官網(wǎng)下載一個版本,解壓后拷貝大wwwroot中
3、增加圖片上傳控制器
@using CompanyName.ProjectName.Web.Host.Web.Model @model demock @{ ViewData["title"] = "富文本框"; Layout = "_SimpleTable"; } @section 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>*@ } <section 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" rel="external nofollow" > <i class="orange ace-icon fa fa-cog bigger-120"></i> 發(fā)郵件 </a> </li> <li class="active"> <a href="javascript:void(0);" rel="external nofollow" > <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">內(nèi)容</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 --> </section> @section 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", //開啟文件上傳(此項(xiàng)會同時開啟圖片和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", //開啟文件上傳(此項(xiàng)會同時開啟圖片和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對象,因此建了一個
簡單的對象返回。
運(yùn)行效果
源碼地址
https://gitee.com/conanOpenSource_admin/CompanyName.ProjectName
到此這篇關(guān)于asp.net core集成CKEditor實(shí)現(xiàn)圖片上傳功能的示例代碼的文章就介紹到這了,更多相關(guān)asp.net core CKEditor圖片上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
asp.net GridView和DataList實(shí)現(xiàn)鼠標(biāo)移到行行變色
在設(shè)計頁面添加了DataList控件后,我在使用DataList綁定數(shù)據(jù)時是通過單元格來綁定的,因此鼠標(biāo)效果就在源代碼頁面去實(shí)現(xiàn)2009-02-02基于asp.net下使用jquery實(shí)現(xiàn)ajax的解決方法
本文以最簡單的方法為新手示范如何使用jquery實(shí)現(xiàn)ajax技術(shù)(所以本文是專為新手所寫,老鳥勿噴,大神此處省略一萬字)。至于什么是jquery什么是ajax,自己谷歌去2013-05-05詳細(xì)說明asp.net中datareader 和 dataset 的區(qū)別
asp.net中datareader 和 dataset的區(qū)別主要是在獲取數(shù)據(jù)的機(jī)制和獲取數(shù)據(jù)的方式方面,下面我們來看教程2013-08-08ASP.NET Core 奇技淫巧之接口代理轉(zhuǎn)發(fā)的實(shí)現(xiàn)
這篇文章主要介紹了ASP.NET Core 奇技淫巧之接口代理轉(zhuǎn)發(fā)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08C#中efcore-ShardingCore呈現(xiàn)“完美”分表
本文簡單的介紹了efcore的分表,著重介紹了efcore下最完美的分表組件ShardingCore,可以幫助大家更好的學(xué)習(xí),感興趣的小伙伴可以參考一下2021-08-08ASP.NET MVC如何使用Unity實(shí)現(xiàn)Ioc詳解
這篇文章主要給大家介紹了關(guān)于ASP.NET MVC如何使用Unity實(shí)現(xiàn)Ioc的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07探究ASP.NET Core Middleware實(shí)現(xiàn)方法
這篇文章主要介紹了探究ASP.NET Core Middleware實(shí)現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02asp.net中Fine Uploader文件上傳組件使用介紹
最近在處理后臺數(shù)據(jù)時需要實(shí)現(xiàn)文件上傳.考慮到對瀏覽器適配上采用Fine Uploader. Fine Uploader 采用ajax方式實(shí)現(xiàn)對文件上傳.同時在瀏覽器中直接支持文件拖拽[對瀏覽器版本有要求類似IE版本必須是9或是更高的IE10].2013-01-01