网站建设 合作协议,杭州建设网 执法人员名单,免费的网站域名查询app,安徽公路建设行业协会网站是哪个背景本文为大家分享了asp.net core 如何集成CKEditor #xff0c;并实现图片上传功能的具体方法#xff0c;供大家参考#xff0c;具体内容如下。准备工作1.visual studio 2019 开发环境2.net core 2.0 及以上版本实现方法1、新建asp.net core web项目2、下载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;
}
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 classcontentdiv classbox box-primarydiv classbox-header with-borderul classnav nav-tabs padding-18lia href/demo/sendmaili classorange ace-icon fa fa-cog bigger-120/i发邮件/a/lili classactivea hrefjavascript:void(0);i classgreen ace-icon fa fa-home bigger-120/i富文本编辑框/a/li/ul/div!-- /.box-header --!-- form start --form roleform idform1div classbox-bodydiv classcallout callout-successh4富文本编辑器/h4p/p/divtable classformtrth classformTitle内容/thtd classformValueHtml.EditorFor(model model.rules)*textarea classform-control nameText idText styleheight: 70px; placeholder/textarea*/td/tr/table/div!-- /.box-body --div classbox-footerbutton typebutton idbtnSave classbtn btn-success保存/button/div/form/div!-- /.tab-content --
/pp scripts{script src~/ckeditor/ckeditor.js/scriptscript src~/js/jquery.base64.js/scriptscript typetext/javascript//editor.document.getBody().getText(); //取得纯文本//editor.document.getBody().getHtml(); //取得html文本//var editor CKEDITOR.replace(Text,//{// toolbar: Full,// filebrowserUploadUrl: /Image/ckupload?typeFile, //开启文件上传此项会同时开启图片和FLASH上传// filebrowserImageUploadUrl: /Image/ckupload?typeImages, // 开启图片上传// filebrowserFlashUploadUrl: /Image/ckupload?typeFlash //开启FLASH上传//});$.base64.utf8encode true;var editor2 CKEDITOR.replace(rules,{toolbar: Full,filebrowserUploadUrl: /Image/ckupload?typeFile, //开启文件上传此项会同时开启图片和FLASH上传filebrowserImageUploadUrl: /Image/ckupload?typeImages, // 开启图片上传filebrowserFlashUploadUrl: /Image/ckupload?typeFlash //开启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 typetext/javascriptwindow.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
