Click here to Skip to main content
15,867,963 members
Articles / Web Development / ASP.NET
Tip/Trick

Integrate CKEditor with ASP.NET page

Rate me:
Please Sign up or sign in to vote.
4.97/5 (18 votes)
13 Nov 2010CPOL1 min read 66.7K   18   9
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
XML
<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

C#
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)


Written By
Chief Technology Officer
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

 
GeneralMy vote of 1 Pin
carlsheehan16-Jul-13 8:03
carlsheehan16-Jul-13 8:03 
GeneralReason for my vote of 1 not good Pin
manoharnch1-Dec-11 20:15
manoharnch1-Dec-11 20:15 
GeneralCKeditor not funtion, I am getting this error. Pin
shailubajpai123-Jun-11 4:45
shailubajpai123-Jun-11 4:45 
GeneralWhat if the user clicks on the 'Save' icon on the CKEditor t... Pin
EricFaust21-Apr-11 0:36
EricFaust21-Apr-11 0:36 
GeneralReason for my vote of 2 There is a better way Pin
jerzi.net20-Jan-11 4:36
jerzi.net20-Jan-11 4:36 
General@h.jaza : share with us Pin
Shahriar Iqbal Chowdhury/Galib22-Dec-10 23:07
professionalShahriar Iqbal Chowdhury/Galib22-Dec-10 23:07 
GeneralReason for my vote of 2 Three are much more easy way... Pin
jerzi.net22-Dec-10 21:28
jerzi.net22-Dec-10 21:28 
GeneralReason for my vote of 5 Very good. Straight and to the point... Pin
Christian Mattix9-Nov-10 2:25
Christian Mattix9-Nov-10 2:25 
GeneralReason for my vote of 5 great introduction Pin
Monjurul Habib3-Nov-10 0:21
professionalMonjurul Habib3-Nov-10 0:21 

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

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