a blog for those who code

Thursday 14 August 2014

How to Integrate CKEditor in Asp Net Web Application

In this post we will show you, how to integrate CKEditor in your Asp.Net application. Its an open source application, which means it can be modified as per your requirement.
What is CKEditor? CKEditor is a ready to use HTML text editor designed to simplify web content creation. At first download the latest version of CKEditor from CKDownload where you can choose the package you required. They have three packages Basic, Standard and Full.

Now create a new Asp.Net Empty Web Application. Add ckeditor folder inside your application.
Add a new page (TestPage.aspx) and add the below code into it

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="CKEditorInAspNet.TestPage" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CKEditor Test</title>
    <script src="ckeditor/ckeditor.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtCKEditor" runat="server" TextMode="MultiLine" Columns="60" Rows="10" class="ckeditor"></asp:TextBox>
    </div>
    </form>
</body>
</html>


In your code behind file you can get the text of CKEditor in same way as the normal textbox.
string str = txtCKEditor.Text;

This will be the output if you run your project. In this example we have used the standard package of CKEditor. We have used Moono skin, you can even use the kama skin if you want that can be downloaded from the CKEditor site itself. We have used VS 2012 to create the demo project.

Source Code : CKEditorInASPNet 

Please Like and Share the Blog, if you find it interesting and helpful.

You may also like :

Casting with is and as operators in C#
Definition and Use of Indexes
Dot Net : All types are derived from System.Object
All you want to know about Common Language Run Time (CLR)
Null Coalescing operator (??) in C#
All about MongoDB Collections
How to improve Asp.Net Application Performance - Part 2
Write text files without Byte Order Mark.
Dictionary Vs Hashtable
C# NullReferenceException : Object reference not set to an instance of an object

2 comments:

  1. How to bind data txtCKEditor from java script?

    ReplyDelete
  2. I was not knowing that using ckeditor is that easy. Thanks for the info.

    ReplyDelete