이 글에서는 참고용으로 asp.net core가 kindeditor를 통합하고 이미지 업로드 기능을 구현하는 구체적인 방법을 공유합니다.
준비 작업
1 .visual studio 2015 업데이트3 개발 환경
2.net core 1.0.1 이상
디렉터리
새 asp.net 핵심 웹 프로젝트 만들기
kindeditor 다운로드
이미지 업로드 컨트롤러 추가
kindeditor 매개변수 구성
코드 다운로드
새 asp.net 핵심 웹 프로젝트 만들기
kindeditor
웹 애플리케이션 선택
kindeditor 다운로드
여기서 시스템과 함께 제공되는 새 샘플 프로젝트를 만들고, kindeditor 공식 웹사이트에서 버전을 다운로드하고, 큰 wwwroot
의 압축을 풀고 복사하고 보기를 수정합니다. /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"> //实例化编辑器 //建议使用工厂方法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; } } }
종류 편집기 매개변수 구성
<script type="text/javascript"> //实例化编辑器 //建议使用工厂方法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>
실행 효과
이 글의 내용은 모두의 학습에 도움이 되기를 바랍니다.