背景

本文为大家分享了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="~http://www.580doc.com/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对象,因此建了一个

简单的对象返回。

运行效果

源码地址

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

到此这篇关于asp.net core集成CKEditor实现图片上传功能的示例代码的文章就介绍到这了,更多相关asp.net core CKEditor图片上传内容请搜索乐虎体育以前的文章或继续浏览下面的相关文章希望大家以后多多支持乐虎体育!

asp.net core集成CKEditor实现图片上传功能的示例代码的更多相关文章

  1. C#实现简单的五子棋游戏

    最近利用业余时间写了一个简单的五子棋游戏,没有利用深层次的面向对象技术,自学一年,代码和程序设计有不妥之处,还望大神......

  2. 浅入 .NET Core 中的内存和GC知识

    目录 托管代码 自动内存管理 参考资料: 【1】https://docs.microsoft.com/z......

  3. 浅谈ASP.NET Core中IOC与DI的理解和使用

    说起IOC和DI,使用过ASP.NET Core的人对这两个概念一定不陌生,早前,自己也有尝试过去了解这两个东西,但......

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

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

随机推荐

  1. JavaScript如何操作css

    原本应该是由css进行控制html中的div的宽高和背景颜色,但是在下方使用了JavaScript进行重新调用了di......

  2. PHP文件操作简单介绍及函数汇总

    文件操作一直是Web程序员头疼的地方,而文件操作在CMS这样的系统中又是必须的。如今,PHP文件操作的函数内容已经非......

  3. Opencv+Python识别PCB板图片的步骤

    任务要求:基于模板匹配算法识别PCB板型号使用工具:Python3、OpenCV使用模板匹配算法,模板匹配是一种最原......

  4. javascript 数组(list)添加/删除的实现

    javascript 数组Array(list)添加/删除unshift:将参数添加到原数组开头,并返回数组的长度p......

  5. php的curl携带header请求头信息实现http访问的方法

    导读:curl请求时添加请求头信息可以模拟真人操作,不容易被当成是爬虫机器人(采集),从而可以绕过Incapsula......

  6. 浅谈ASP.NET Core中IOC与DI的理解和使用

    说起IOC和DI,使用过ASP.NET Core的人对这两个概念一定不陌生,早前,自己也有尝试过去了解这两个东西,但......

  7. javascript中call,apply,bind的区别详解

    在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢。在说区别之前还是先总结一下三者的相似之......

  8. java中throws实例用法详解

    在程序出现异常时,会有一个抛出异常的throw出现,这里我们要跟今天所讲的throws区分开。throws的作用是声......

  9. JavaScript 如何禁止用户保存图片

    场景 在业务需求中不希望用户保存图片,因为是一些供内部使用的图片。 思路 添加事件禁止选择、拖拽、右键(简单的禁......

  10. 基于 Python 实践感知器分类算法

    Perceptron是用于二进制分类任务的线性机器学习算法。它可以被认为是人工神经网络的第一种和最简单的类型之一。绝......