asp.net core整合kindeditor實現圖片上傳功能

來源:互聯網
上載者:User
本文為大家分享了asp.net core 如何整合kindeditor並實現圖片上傳功能的具體方法,供大家參考,具體內容如下

準備工作

1.visual studio 2015 update3開發環境

2.net core 1.0.1 及以上版本

目錄

建立asp.net core web項目

下載kindeditor

增加圖片上傳控制器

配置kindeditor參數

代碼下載

建立asp.net core web項目

建立一個asp.net core項目,這裡命名為kindeditor

選中web應用程式

下載kindeditor

這裡我們建立了一個系統內建的樣本項目,去 kindeditor官網下載一個版本,解壓後拷貝大wwwroot中

修改views/index.cshtml

@{ ViewData["Title"] = "Home Page";}<link href="~/kindeditor/themes/default/default.css" rel="stylesheet" /><script src="~/kindeditor/kindeditor-min.js"></script><script src="~/kindeditor/lang/zh_CN.js"></script>  <div class="row"> <textarea id="detail_desc" name="detail_desc" style="width:700px;height:300px;">    </textarea></div><script type="text/javascript"> //執行個體化編輯器 //建議使用Factory 方法getEditor建立和引用編輯器執行個體,如果在某個閉包下引用該編輯器,直接調用UE.getEditor('editor')就能拿到相關的執行個體 KindEditor.ready(function (K) {  window.editor = K.create('#detail_desc', {   width: '98%',   height: '500px'  }); });</script>

運行一下現在就可以看到kindeditor已經整合進來了。

增加圖片上傳控制器

注意返回是一個json對象,因此建了一個簡單的對象返回。

using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using Microsoft.AspNetCore.Mvc;using Microsoft.AspNetCore.Http;using Microsoft.Net.Http.Headers;using Microsoft.AspNetCore.Hosting;using System.IO;namespace kindeditortest.Controllers{ public class HomeController : Controller {  private IHostingEnvironment hostingEnv;  public IActionResult Index()  {   return View();  }  public HomeController(IHostingEnvironment env)  {   this.hostingEnv = env;  }  /// <summary> /// Kindeditor圖片上傳  /// </summary> /// <param name="imgFile">Kindeditor圖片上傳內建的命名,不可更改名稱</param> /// <param name="dir">不可更改名稱 這裡沒有用到dir</param> /// <returns></returns> public IActionResult KindeditorPicUpload(IList<IFormFile> imgFile, string dir)  {   PicUploadResponse rspJson = new PicUploadResponse() { error = 0, url = "/upload/" };   long size = 0;   string tempname = "";   foreach (var file in imgFile)   {    var filename = ContentDispositionHeaderValue        .Parse(file.ContentDisposition)        .FileName        .Trim('"');    var extname = filename.Substring(filename.LastIndexOf("."), filename.Length - filename.LastIndexOf("."));    var filename1 = System.Guid.NewGuid().ToString() + extname;    tempname = filename1;    var path = hostingEnv.WebRootPath;    filename = hostingEnv.WebRootPath + $@"\upload\{filename1}";    size += file.Length;    using (FileStream fs = System.IO.File.Create(filename))    {     file.CopyTo(fs);     fs.Flush();     //這裡是商務邏輯    }   }   rspJson.error = 0;   rspJson.url = $@"../../upload/" + tempname;   return Json(rspJson);  }  public IActionResult About()  {   ViewData["Message"] = "Your application description page.";   return View();  }  public IActionResult Contact()  {   ViewData["Message"] = "Your contact page.";   return View();  }  public IActionResult Error()  {   return View();  } } public class PicUploadResponse {  public int error { get; set; }  public string url { get; set; } }}

配置kindeditor參數

<script type="text/javascript"> //執行個體化編輯器 //建議使用Factory 方法getEditor建立和引用編輯器執行個體,如果在某個閉包下引用該編輯器,直接調用UE.getEditor('editor')就能拿到相關的執行個體 KindEditor.ready(function (K) {  window.editor = K.create('#detail_desc', {   width: '98%',   height: '500px',   uploadJson: '/home/KindeditorPicUpload',   fileManagerJson: '/home/KindeditorPicUpload',   allowFileManager: true  }); });</script>

運行效果

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.