如何将NicEdit RTF编辑器与asp.net C＃（.aspx）页面集成

Question

I found many solution for Text editing in web pages, But one of most handy and light weight Text Editor is NiEditor . I was burning my head to upload image by editor to my own server. By default editor uploads images on [IMGUR] server. My question is how to upload image(s) to my own server instead of IMGUR server? Image Link

Answer 1

Here I found nice solution for image uploading in .net. Generic Handlers are the best option for image uploading. Please follow the steps below to integrate NicEditor with asp.net using C#.

1. Download latest nicEdit.js from nicedit.com.

2. Modify line no 1888 with the below code

 nicURI: "images.ashx"

3. Create a generic handler to upload image named images.ashx.

4. Write the below code in yourhandler.ashx file inside public void ProcessRequest(HttpContext context) .

    string baseImageLocation = HttpContext.Current.Server.MapPath("~/Admin/imgs/"); HttpPostedFile Files; Files = context.Request.Files[0]; // Load File collection into HttpFileCollection variable. //Files.ContentLength; //Files.ContentType; if (Files != null && Files.ContentLength > 0) { System.IO.Stream fileStream = Files.InputStream; fileStream.Position = 0; byte[] fileContents = new byte[Files.ContentLength]; fileStream.Read(fileContents, 0, Files.ContentLength); string fileExt = System.IO.Path.GetExtension(Files.FileName).ToLower(); string fileName = Path.GetFileName(Files.FileName); System.Drawing.Image image = null; if (fileName != null) { if (fileExt == ".jpg" || fileExt == ".gif" || fileExt == ".jpg" || fileExt == ".png" || fileExt == ".jpeg") { image = System.Drawing.Image.FromStream(new System.IO.MemoryStream(fileContents)); if (System.IO.File.Exists(baseImageLocation + "/" + fileName)) fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + fileExt; Files.SaveAs(baseImageLocation + fileName); } } string link = VirtualPathUtility.ToAbsolute("~/Admin/imgs/") + fileName; string imageHeight = image.Height.ToString(); string imageWidth = image.Width.ToString(); string json = ""; json += "{" + "\\"links\\": \\"" + link + "\\"," + "\\"width\\": \\"" + imageWidth + "\\"," + "\\"height\\": \\"" + imageHeight + "\\"" + "}"; context.Response.ContentType = "application/json"; context.Response.Write(json); } 

5. Please be noted , place your nicEdit.js file and yourhandler.ashx file in the same folder so that it can be easily accessed path of the handler.

6. Create image folder to upload images (uploaded by editor) in solution directory.