ckeditor with image upload in asp.net
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:
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.