Click here to Skip to main content
Click here to Skip to main content

Integrate CKEditor with ASP.NET page

, 13 Nov 2010
Rate this:
Please Sign up or sign in to vote.
An easy way to integrate CKEditor with ASP.NET web page, validate the editor content and retrive the editor content from server side code
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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Shahriar Iqbal Chowdhury/Galib
Technical Lead
Bangladesh Bangladesh
I am a Software Engineer and Microsoft .NET technology enthusiast. Professionally I worked on several business domains and on diverse platforms. I love to learn and share new .net technology and my experience I gather in my engineering career. You can find me from here
 
Personal Site
Personal Blog
FB MS enthusiasts group
About Me

Comments and Discussions

 
GeneralReason for my vote of 5 great introduction PinmemberMonjurul Habib3-Nov-10 0:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140827.1 | Last Updated 13 Nov 2010
Article Copyright 2010 by Shahriar Iqbal Chowdhury/Galib
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid