24

I am looking to include CKEditor in a project I am working on and I need the image upload support provided by the CKFinder plugin, however I do not particularly need the rest of the CKFinder tool and thus purchasing a license is a little overkill. Has anyone taken the time to implement a custom image uploader for CKEditor 3 that will work with ASP.NET MVC? If need be I can create my own, just wanted to check here first.

Alternatively, does anyone know of a decent WYSIWYG editor on par with CKEditor / Cute Editor that supports image uploading and will work in ASP.NET MVC?

j08691
  • 204,283
  • 31
  • 260
  • 272
Nathan Taylor
  • 24,423
  • 19
  • 99
  • 156

4 Answers4

31

Here is a image uploader I originally wrote in ASP.NET WebForms for Fckeditor (hence the theme no longer matches), that I've modified to work with Ckeditor.

https://github.com/mcm-ham/ckeditor-image-uploader

Update: I've now added an example showing how you can add this WebForms image uploader to a MVC project.

Update 2: I've now added a Razor Pages version which can be used in .NET Core MVC projects.

Michael
  • 11,571
  • 4
  • 63
  • 61
  • Excellent this saved me a lot of problems! – Leah Oct 11 '11 at 13:09
  • 3
    This example is webforms rather than MVC. – Mike Gleason Nov 17 '11 at 22:57
  • 3
    This image loader is webforms based but should still work in a MVC project. How Ckeditor is added to the page can be ignored. Just ImageBrowser.aspx, LinkBrowser.aspx & config.js under the ckeditor folder need to be copied over as well as the two appSettings in web.config. – Michael Jun 08 '13 at 21:16
  • @Michael When i include the dll i get this error `Could not load file or assembly 'System.Web.Helpers, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' or one of its dependencies. Strong name signature could not be verified. The assembly may have been tampered with, or it was delay signed but not fully signed with the correct private key. (Exception from HRESULT: 0x80131045)`. This is an website targeting .net framework 4.0. Do you know how to resolve this? Thanks for image up-loader. – Monzir Oct 28 '13 at 13:14
  • @Answer fixed, I did do a custom build of the library because of [this issue](http://aspnetwebstack.codeplex.com/workitem/1126) I was experiencing but decided it's easier to just go back to what I had and remove dependency on that library. – Michael Dec 13 '13 at 10:08
  • Great job Michael, your example made my day~! After 4 hours searching, I found your example and it works! Only one question, how to save the content of the editor to storage in MVC 5? Thanks~! – Franva May 22 '15 at 06:27
  • Check this URL http://r2d2.cc/2010/11/03/file-and-image-upload-with-asp-net-mvc2-with-ckeditor-wysiwyg-rich-text-editor/ – ujjaval Aug 22 '15 at 17:43
  • The URL in the answer is broken :( – Seth May 04 '16 at 19:30
  • @Seth, I've just updated the URL hopefully you won't be asked for credentials. – Michael May 05 '16 at 03:19
  • Hi, I acted according to your code, but when I click the OK button, the image is not displayed in `textarea`. How do I solve this problem?@Michael – ho h Jun 07 '21 at 13:25
22

Here is a tutorial on how to upload image with ASP:NET MVC2 (not Webforms) using CKEditor

http://arturito.net/2010/11/03/file-and-image-upload-with-asp-net-mvc2-with-ckeditor-wysiwyg-rich-text-editor/

Artur Kedzior
  • 3,994
  • 1
  • 36
  • 58
  • 1
    This example is MVC. The only problem is that it's incomplete (the controller doesn't actually save the file). But, you can fix that in section "6. Controller..." if you replace line 6-10 (and fix line 13 and 16) with the logic Phil talks about in http://haacked.com/archive/2010/07/16/uploading-files-with-aspnetmvc.aspx – Mike Gleason Nov 17 '11 at 23:19
  • Thanks - this one was spot on! – MojoDK Oct 08 '12 at 10:49
  • Finally, after looking into a lot of plugins..! Thanks! – adelb Jan 11 '13 at 10:14
  • 2
    I have created an updated version of Arturito solution that includes actual file upload too: https://gist.github.com/afsharm/5660844 – Afshar Mohebi May 28 '13 at 06:36
2

I have used ckeditor and the upload control using ASP.NET, but not MVC specifically. I haven't found anything on par with ckeditor that is even close to being as easy to set up or offers the same features.

Not sure of the restrictions for MVC, but I set up file upload support by using the following:

  • The basic documentation referring mostly to the CKFinder plugin you mentioned:

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_%28Uploader%29

  • Better documentation on how to implement the upload component:

How can you integrate a custom file browser/uploader with CKEditor?

Otherwise, I believe ckeditor just stuffs all the image bytes in the request object and sends it to the page configured for uploading. This page can take those bytes and do whatever it pleases (i.e. save them to the file system, sql server, etc.) This is where the custom implementation comes in.

Instead of using a page to do the upload, I used an httphandler implementation. The page ckeditor redirects to calls the requisite javascript function to indicate the status of the upload after it is complete, but the handler really controls the actual file upload. The basic implementation for the httphandler I used is at:

http://darrenjohnstone.net/2008/07/15/aspnet-file-upload-module-version-2-beta-1/

Hope this at least gives you a starting point.

UPDATE: found this while searching for some other stuff. Didn't look at in depth, but seems to be right up your alley:

http://interactiveasp.net/blogs/spgilmore/archive/2009/06/03/how-to-support-file-uploads-in-asp-net-mvc.aspx

Community
  • 1
  • 1
2

If you need to implement it quickly and have a reliable solution, you may consider a hosted solution to upload and store images for CKEditor - for example, our plugin:

http://ckeditor.com/addon/uploadcare

David Avsajanishvili
  • 7,678
  • 2
  • 22
  • 24