asp.net core集成CKEditor实现图片上传功能的示例代码
更新时间：2021年01月10日 10:08:25 作者：UP技术控
这篇文章主要介绍了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";
}
@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>
发邮件
</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">内容</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", //开启文件上传（此项会同时开启图片和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 = "" + Request.Host.Value;
output = string.Format(output, Request.Query["CKEditorFuncNum"], url + "/" + fileName2);
ViewBag.cc = output;
return View();
}
4、增加图片上传控制器注意返回是一个json对象，因此建了一个
简单的对象返回。
运行效果
源码地址
gitee.com/conanOpenSource_admin/CompanyName.ProjectName
到此这篇关于asp.net core集成CKEditor实现图片上传功能的示例代码的文章就介绍到这了,更多相关asp.net core CKEditor图片上传内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟！
您可能感兴趣的文章:如何在Asp.Net Core中集成ABP Dapper如何在Asp.Net Core中集成Refitasp.net core 使用 TestServer 来做集成测试的方法在ASP.NET Core Mvc集成MarkDown的方法asp.net core集成JWT的步骤记录Asp.Net Core利用xUnit进行主机级别的网络集成测试详解asp.net core集成MongoDB的完整步骤ASP.NET Core与NLog集成的完整步骤ASP.NET Core+Docker+Jenkins实现持续集成的完整实例asp.net core 2.0 webapi集成signalr(实例讲解)asp.net core集成kindeditor实现图片上传功能ASP.NET Core 集成 React SPA应用的步骤
asp.net
core
CKEditor
图片上传
相关文章
.NET Framework中定时器timer的单线程与多线程使用讲解这篇文章主要介绍了.NET Framework中定时器timer的单线程与多线程使用讲解,单线程定时器在性能方面不如多线程,但是可以做到线程安全,需要的朋友可以参考下 2016-04-04
AspNetPager+GridView实现分页的实例代码AspNetPager+GridView实现分页的实例代码，需要的朋友可以参考一下 2013-03-03
System.Timers.Timer定时执行程序示例代码如果是某个逻辑功能的定时，可以将code放到逻辑功能的类的静态构造函数中，在该逻辑类第一次执行时，静态构造函数会被调用，则定时自然启动 2013-06-06
asp.net身份验证方式介绍asp.net提供了3种认证方式: windows身份验证, Forms验证和Passport验证 2012-06-06
ASP.NET连接数据库并获取数据方法总结这篇文章主要介绍了ASP.NET连接数据库并获取数据方法,结合实例分析总结了ASP.NET连接数据库及获取数据的相关实现技巧,并附带了web.config配置文件的使用方法与相关注意事项,需要的朋友可以参考下 2015-11-11
ASP.NET购物车实现过程详解这篇文章主要为大家详细介绍了ASP.NET购物车的实现过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 2015-10-10
如何取得Repeater控件选择的项目及注意事项Repeater控件，每个item前有一个CheckBox，把选择的item列显出来,有两个地方需要注意的，就是CheckBox与Label，这个Label是随你需要获取的内容而变化喔。如你想获取Nickname,那你需要把绑定的的内容放在Label上 2013-01-01
asp.net DataSet进行排序关于对已经绑定的DataSet的排序的问题。 2009-07-07
Global.cs中自动获取未处理的异常在一个项目中为了能捕获异常最常用的方法就是try{}catch{}了，但是事实上并不可能将所有的异常考虑到位。因此有人就想除了被try{}catch{}捕获的异常其余未被处理的异常均由全局应用程序也就是Global来捕获处理 2011-12-12
ASP.NET实现个人信息注册页面并跳转显示这篇文章主要介绍了ASP.NET实现个人信息注册页面并跳转显示的相关资料,本文图文并茂给大家介绍的非常详细，需要的朋友可以参考下 2016-11-11
最新评论
本文由 华域联盟 原创撰写：华域联盟 » asp.net core集成CKEditor实现图片上传功能的示例代码
转载请保留出处和原文链接：https://www.cnhackhy.com/5002.htm
