Integrate CKEditor with ASP.NET page

FCKEditor has always been my favorite for managing web page contents, and now the new version is released known as CKEditor is the next version of FCKeditor. The editor has been re branded and completely rewritten. It is much faster and loads faster then the previous FCKEdtor. But one problem I face is that the new version is yet to provide ASP.NET support like FCKEditor did.

So I have integrate this new editor with ASP.NET web page with JQuery.
I want to share a simple way to integrate CKEditor into a aspx page. All you need to do is to integrate this code into your desired page.
For this example, I put all ckeditor files in ckeditor directory under project root.
First Script will include the editor and second script we use for retrieving content and validation.

*.aspx Page
include into header

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>

include into body

<textarea name="editor1" id="ckeditor"></textarea>
<input id="hidCKEDitorValue" type="hidden" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="hidCKEDitorValue" Display="Static" SetFocusOnError="true" runat="server" ErrorMessage="* required"></asp:RequiredFieldValidator>

 <asp:Button ID="imgSaveBottom" runat="server" OnClick="Create_Click" Text="Save" OnClientClick="javascript:return GetCKEditorData();" />

Put this script on page footer

<script type="text/javascript">
        $(document).ready(function () {
            $('#ckeditor').ckeditor();
            $('#ckeditor').val($("#<%= hidCKEDitorValue.ClientID %>").val());
        });
        function GetCKEditorData() {
            var data = $('#ckeditor').val();
            if (data != "") {
                $("#<%= hidCKEDitorValue.ClientID %>").val(data);
                return true;
            }
            else {
                alert("Empty is not allowed.");
                return false;
            }
        }
    </script>

The above code does the trick, when you hit save, it loads the content from client side editor to a server hidden control so that it will be available from server side code for processing, also it uses the hidden control to tie up with ASP.NET validator control. Even you can use custom control to validate the data. Now the easy part - grab the data from hidden control and use that.

*.aspx.cs page

protected void Create_Click(object sender, EventArgs e)
    {
        String ckContentValue=hidCKEDitorValue.Value.Trim();
    }

That's it !! Now you can play-around with the value.