asp.net core集成CKEditor实现图片上传功能的示例代码

(编辑:jimmy 日期: 2024/10/8 浏览:2)

背景

本文为大家分享了asp.net core 如何集成CKEditor ,并实现图片上传功能的具体方法,供大家参考,具体内容如下。

准备工作

1.visual studio 2019 开发环境

2.net core 2.0 及以上版本

实现方法

1、新建asp.net core web项目

asp.net core集成CKEditor实现图片上传功能的示例代码

2、下载CKEditor

这里我们新建了一个系统自带的样本项目,去 CKEditor官网下载一个版本,解压后拷贝大wwwroot中

asp.net core集成CKEditor实现图片上传功能的示例代码

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="/UploadFiles/2021-04-02/ckeditor.js">


 /// <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对象,因此建了一个

简单的对象返回。

运行效果

asp.net core集成CKEditor实现图片上传功能的示例代码

asp.net core集成CKEditor实现图片上传功能的示例代码

源码地址

https://gitee.com/conanOpenSource_admin/CompanyName.ProjectName

一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?