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";
}
@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实现图片上传功能相关推荐
- ckeditor java 上传_java使用CKEditor实现图片上传功能
java如何使用ckeditor实现图片上传功能,具体内容如下 1.根据实际需要下载指定的ckeditor 2.删除文件ckeditor/plugins/image/dialogs/image.js预 ...
- ckfinder php 配置,PHP中Ckeditor+Ckfinder配置图片上传功能_PHP教程
从标题来看我们知道Ckeditor不支持图片上传功能,它是需要一个组件Ckfinder才可以支持上传图片, 本文章就来详细的介绍了如何配置Ckeditor+Ckfinder实现图片上传的功能. 第一: ...
- 使用struts2完成ckeditor和图片上传
代码地址如下: http://www.demodashi.com/demo/12427.html 使用struts2完成ckeditor和ckeditor图片上传 ckeditor版本ckeditor ...
- ckeidtor编辑器添加图片上传功能
1.ckeditor默认没有上传图片功能,只能通过Url显示图片,图下图 2.首先说明,ckeditor是有上传功能的,只是隐藏了,需要通过配置让它显示 找到ckeditor/plugins/imag ...
- 关于微信内置浏览器,打开图片上传功能,调用的问题
关于微信内置浏览器,打开图片上传功能,调用的问题 前段时间,项目完结测试的时候,同事打开魅族手机测试,无意中发现一个奇葩的问题! 描述: 显示的是文件系统,列表式的,没有调用相机的功能图标,为什么呢? ...
- (转)淘淘商城系列——实现图片上传功能
http://blog.csdn.net/yerenyuan_pku/article/details/72808000 上文我们使用FastDFS-Client进行了简单的文件上传操作测试,淘淘商城项 ...
- Smiditor实现图片上传功能
Simditor 是 Tower 开源的一个基于浏览器所见即所得的文本编辑器. 相比传统的编辑器它的特点是: 功能精简,加载快速 输出格式化的标准 HTML 每一个功能都有非常优秀的使用体验 兼容的主 ...
- PHP实现图片上传功能
PHP实现图片上传功能: 第一个页: picupload.php 代码如下: <form action="picop.php" method="post" ...
- Vue 图片上传功能
Vue 图片上传功能 Vue 图片上传功能,自定义上传 限制上传类型 & 多选: ① accept 属性只能与 配合使用.它规定能够通过文件上传进行提交的文件类型. ② multiple 属性 ...
最新文章
- 妙用Java 8中的 Function接口 消灭if...else(非常新颖的写法)
- Spring冲刺计划会议
- 《深入理解Java虚拟机》读书笔记七
- 网络互连基础——笔记
- Silverlight 4 新特性之Silverlight as Drop Target
- strace用法学习
- java nature_Java Nature.nsf方法代码示例
- 狂神说es笔记_人教版七上英语Unit5电子课本音频+课堂笔记+课后同步习题
- 建立、遍历二叉树(二叉链表)
- (C++) CreateThread
- C++ MFC实现基于RFID读写器的上位机软件
- linux内核调试器ftrace使用
- 三菱fx3u通讯手册_三菱FX3U与变频器通讯程序如何编写
- 三层交换原理及实验操作
- 22计算机408考研—数据结构—线性表、栈、队列、数组
- PDF文件怎么旋转保存
- 利用Matlab App Designer简单设计程序
- 招商银行笔试题之爱吃喵粮的小招喵
- 为什么存png还有白色底_用photoshop保存透明背景的图片为png格式,为什么打开后是白色背景了?...
- 每日MySQL之010:导出Delimited-Text格式文件
热门文章
- HTML5+CSS3+JQuery1.9 输入框切换和Div失焦模拟
- linux系统下nginx安装目录和nginx.conf配置文件目录
- 寻找kernel32.dll的地址
- 斯坦福大学Andrew Ng - 机器学习笔记(8) -- 推荐系统 大规模机器学习 图片文字识别...
- SQL Server创建索引(转)
- 一些有意思的算法代码[转载]
- 还原出厂设置 擦除frp_如何备份,擦除和还原Apple Watch
- mysql qt自增_mysql自增设置
- H5 video 开发问题及相关知识点
- Ubuntu Core 给物联网提供更多安全支持