ckeditor with image upload in

CKEditor is a free open source WYSIWYG HTML text editor used to manage website content. The most common use of HTML editors is to manage HTML formatted text. WYSIWYG editors simplifies the process of creating complex HTML. CKEditor is a open source free editor but image uploading and browsing is not included in the Free version. To enable image upload and browse features of CKEditor you have to purchase their CKFinder Add-on. 

To enable free image upload and browse functionality in CKEditor we will use "Roxy Fileman" file browser plugin. Roxy Fileman is a free open source file browser and can be used with .net and PHP. This plugin is tested with all the modern browsers like Internet Explorer, Firefox, Google Chrome, Safari and Opera. "Roxy Fileman" plugin is very advanced and can be easily integrated with CKEditor within few steps without writing single line of code.

Lets create an sample application:

Step1: Create a new asp .net website.

Step2: Download latest version of CKEditor.

Step3: Download Roxy FIleman file browser plugin.

Step4: Copy and paste CKEditor and Roxy Fileman files into your website. After copying the files your website structure will look like this:

Free CKEditor with image upload in asp .net

Step5: Add a new website page.

Step6: Add reference of JQuery and CKEditor libraries to your page.


Step7: Place a textbox inside your page and enable CKEditor and Roxy FileMan.



Step8: Do Roxy Fileman specific changes in web.config file:





Run your application and you will see Free  HTML editor CKEditor with file upload and browse functionality in asp .net. 

I would like to thanks Lyubomir Arsov for Roxy Fileman plugin and CKEditor  team for CKEditor to provide such a beautiful open source plugins. 

Asp.Net Ajax Control Toolkit tutorials.

Give your valuable comments.

6 + 7 =

About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2024 CodingFusion
50+ C# Programs for beginners to practice