CKEditor

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages.

If you are working on project where you have scenario of writing bunch of text, formatting it, saving in database or getting from database then this is the best Plugin I can say. I am explaining how we can integrate this with sample ASP.NET project.

Step 1: Download latest version of CKEditor from here http://ckeditor.com/download

Step 2: Create sample ASP.NET application. It may be MVC or normal depends on your requirement. (Well, I am using MVC as I love it). 

Step 3: Create one AddIns folder in your solution and keep downloaded CKEditor folder in that.

Step 4: Downloaded CKEditor folder will be having all supported Javascript files which makes editor.

Step 5: In you web page, where you want CKEditor, add reference to CKEditor.js file which is inside CKEditor folder like below,

<script type="text/javascript" src="<%= Url.Content("~/AddIns/CKeditor/ckeditor.js") %>"></script>

Step 5: Add textarea element in your ASPX page, which you want to make it as CKEdiitor like below,

<textarea id="textContent"></textarea>

Step 6: Write the following javascript code to call method of CKEditor which makes CKEditor to appear in your page,

<script type="text/javascript">

        $(document).ready(function () {

            showEditor("textContent", "840px", "60px", false);

         });

</script>

The above code calls showEditor method of CKEditor which makes your normal textarea to CKEditor.

Step 7: Add following method at the end of your CKEditor.js file which inturn calls some javascript function to make CKEditor.
function showEditor(srcId, w, h, br) {
    var edtr = CKEDITOR.replace(srcId, { enterMode: CKEDITOR.ENTER_BR, width: w, height:h});
    edtr.on('instanceReady', function (e) { if (br) { $('#' + edtr.id + '_top').hide(); } $('span .cke_toolbar_break').remove(); });
    edtr.config.readOnly = br;
    return edtr;

}

Step 8: Now run your application and see the magic, you can see CKEditor with all controls for Copy, paste, formatting etc. 

This makes very much easy for user to enter text and format it easily. In my next article, I will be explain how to integrate WIRIS editor with CKEditor. Stay tuned.

Hope this is useful. Thank you.