Why CKEditor With Image Upload Option in ASP.NET is needed?

When using a WYSIWYG editor, we will often need to upload image to server and embed it in the HTML content. By default, the CKeditor will support embedding an image that are already uploaded or from an external source by providing its URL (Click image icon in CKeditor toolbar we will get an “Image Properties” popup to insert an image). See the image below,

By looking at the above popup it’s clear that the CKeditor does not provide an option by default to upload image and link it in the editor. To do this, there are some commercial options like ckuploader and CKFinder available already that integrates very well with CKeditor. The ckuploader is a plug-in for CKeditor whereas the CKFinder is an Ajax file manager which can be used with or without CKeditor. In this, let’s see how we can upload image to our website and embed it in CKeditor without using the above paid solutions. This article will help us to do this in 2 ways, Using filebrowserImageUploadUrl property and providing our own implementation of a file uploader Using an external file uploader and embedding the image in CKeditor

Using filebrowserImageUploadUrl property with our own implementation of a file uploader The CKeditor has a property called filebrowserImageUploadUrl which will provide an option to upload images to the server when configured. This property takes a file uploader (a page or a handler) url to upload the selected image to the server. The handler that is responsible for uploading the image should return back the URL of the image to display in the CKeditor. Once filebrowserImageUploadUrl property is configured, you will be able to see a new tab called “Upload” in Image Properties pop-up of CKeditor. See the image below,

ScreenShots:-

CKEditor With Image Upload Option in ASP.NET