Home » Articles


Sponsored links

CodeDigest Navigation

Technology News
No News Feeds available at this time.

Community News
No News Feeds available at this time.
Using/Integrating CKEditor 3.x[aka FCKeditor] in ASP.Net

By Satheesh Babu
Posted On Feb 04,2010
Article Rating:
Average Rating: 5
No of Ratings: 1
No of Comments: 15
Category: ASP.Net
Print this article.

Using CKEditor 3.x[aka FCKeditor] in ASP.Net

A Open Source JavaScript Rich Text Editor(RTF)


CKEditor is formerly called as FCKEditor. It is an open source WYSIWYG editor which is called FCKEditor till 2.x version and got renamed to a new brand called CKEditor and continued its evolution from 3.0 version.


Browse the official page to know more about the CKEditor.


The newer version of CKEditor has all the features of FCKEditor with some improvement done on the areas like accessibility, performance and etc. Read here to know more.

Read my articles on FCKEditor 2.x in codedigest below,

Integrating FCKeditor in ASP.Net Websites – Part 1

Integrating FCKeditor in ASP.Net Websites – Part 2


From an ASP.Net perspective, the CKEditor 3.x does not include a serverside(.dll) library but just clientside executables. Hence, an ASP.Net multiline textbox control can become a rich text editor in the client side by using CKEditor. We can also make a P tag or DIV tag as a rich text editor using the new CKEditor.


Moving forward, we will see how the new CKEditor can be used in an ASP.Net website.


1.      Create a sample Asp.Net poject using your Visual Studio IDE.

2.      Download the latest CKEditor files from here. The current version is 3.1.

3.      Unzip the zip file. Copy the ckeditor folder into your visual studio solution. Refer below,

4.      Drag an ASP.Net textbox control into your aspx page. Set its TextMode property to MultiLine.

5.      To use the CKEditor features with the MultiLine textbox, we need to include ckeditor.js file into our webpage. Refer below,

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


6.      Next, we need to call the ckeditor javascript API to replace the multiline text box to an editor.



The above function can be called from window.onload event.

<script type="text/javascript">








Call the above method after your multiline textbox tag.

<form id="form1" runat="server">


        <asp:TextBox ID="TextBox1" TextMode="MultiLine" runat="server"></asp:TextBox>

    <script type="text/javascript">       




The HTML elements (P or DIV or textarea) will be replaced by an editor instance when the above code executed. The content of the editor will be posted back to HTML element(textarea or P or DIV) when the page is submitted and it can be retrieved using element’s ID on the server side, TextBox1.Text in our case. Multiple ckeditors can be added by passing its ID to replace function.

7.      That’s it! Execute the page and you can see the Ckeditor in action.

Refer below,

The final code will look like,

<head runat="server">


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



    <form id="form1" runat="server">


        <asp:TextBox ID="TextBox1" TextMode="MultiLine" runat="server"></asp:TextBox>

    <script type="text/javascript">       




    <asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />





With this knowledge, we will move forward and do some basic customization on the CKEditor.


Customizing CKEditor

By default, the CKEditor includes large number of editor options. See the image above. Most of the time, we will not require all the above options to do our styling. We can customize the CKEditor like we do in previous versions.


1.      Customizing the editor inline in the webpage through replace function

By default, the editor includes 2 toolbar sets, Full and Basic. To set Basic toolbar,

<script type="text/javascript">

        CKEDITOR.replace('TextBox1', {toolbar:'Basic'});      



Or, you can set your own toolbar set inline like below,

  <script type="text/javascript">

        var config = {



                         ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],

                         ['UIColor'], '/',

                         ['Styles', 'Format', 'Font', 'FontSize']



        CKEDITOR.replace('TextBox1', config);      



2.      Customizing the editor through config.js.

Browse to the config.js file in ckeditor folder. You can set some default setting here. Refer below,

CKEDITOR.editorConfig = function( config )


       // Define changes to default configuration here. For example:

       // config.language = 'fr';

       // config.uiColor = '#AADC6E';



To include your own toolbarset, add your own customized toolbar definition here. Refer below,

CKEDITOR.editorConfig = function( config )


       // Define changes to default configuration here. For example:

       // config.language = 'fr';

    // config.uiColor = '#AADC6E';



    config.toolbar_CodeDigestTool =


    ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],

    ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],

    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],

    ['Link', 'Unlink', 'Anchor'],

    ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],


    ['Styles', 'Format', 'Font', 'FontSize'],

    ['TextColor', 'BGColor'],

    ['Maximize', 'ShowBlocks', '-', 'About']





In the above code, your new toolbar name will be “CodeDigestTool”(The word after “_”)

<script type="text/javascript">

        CKEDITOR.replace('TextBox1', {toolbar:'CodeDigestTool'});      



Refer here to know all the config options.


Editing config.js means you are changing the default ckeditor files. To prevent this, we can customize the ckeditor using an external config file and keep the default ckeditor files intact. To apply the external config file,

CKEDITOR.replace( ' TextBox1',


        customConfig : '/Custom/CodeDigest_config.js'



CodeDigest_config.js can have your custom config settings.

Refer here to know about all available editor options. 


Fetching the Text from CKEditor

Since, it is an ASP.Net textbox control it can be accessed by regular Text property. By default, ASP.Net will not allow HTML inputs to be posted to server in order to prevent the cross site scripting attach. You will get the following error,

A potentially dangerous Request.Form value was detected from the client (TextBox1="").


You need to set ValidateRequest="false" in the Page directive to prevent this error.


To fetch the text from javascript,

function GetText() {





function GetText() {




Refer here to know more above editor instance.



Upload Images with CKeditor

To upload image and emebed it from CKeditor, please refer,

Upload Images and Integrate with CKeditor in Asp.Net


Working with Events

By default, CKEditor exposes number of events that can be hooked from the clientside. Refer the events section here.



CKEDITOR.instances["TextBox1"].on("eventname", event method);



CKEDITOR.instances["TextBox1"].on("instanceReady", InstanceReadyEvent);


        function InstanceReadyEvent() {

            this.document.on("keyup", function() {

                // var editor = CKEDITOR.instances.TextBox1;

                var editor = CKEDITOR.instances["TextBox1"];

                //Your code Goes here                

                var tex = editor.getData();





The above event attaches an onkeyup event on the editor.



Rich text editor is one of the main controls that is required if you build a CMS system or an application that requires rich commenting system. CKEditor is one of the good options when you compare with the other editor’s available online. The editor itself was fully re-written starting from 3.0 version that has drastically improved its performance and its feature set. Go ahead, try this cool editor you will definitely love this!!

Happy Coding!!

Similar Articles
You can contribute to CodeDiget.Com:
Donate to
Article Feedback
Awesome Post (with single Mistake)
use :
CKEDITOR.replace('<%=TextBox1.ClientID %>');
instead of:
Really Good Script
ckeditor in Usercontrol
hi !
I need use CKeditor in WexUserControl.ascx.
what ??

please answer in my mail .

from Iran.Mashhad
How can read html file in ckeditor
Please give a solution somebody how can read an html file in ckeditor and save it with changes pls help somebody pls as soon as posible.... u can also reply me on my email id ...
How can read html file in ckeditor
Please give a solution somebody how can read an html file in ckeditor and save it with changes pls help somebody pls as soon as posible....
nice script to use ckeditor
More on master pages
Grabbing the runtime ClientID worked fine to make the CKEditor, but keeping values assigned server-side wasn't happening. The textbox isn't the actual 'INPUT' part of the textbox. The zero-eth child element of an asp:Textbox is the actual html element.

So, after putting a value from the database into the textbox server side, calling:


preserved the content of the textbox.

On postback, just getting the Text property of the textbox sufficed. No fancy javascript required.
Use CKEditor in ASP.NET with Masterpages
It's simple to use CKEditor in a content page that uses Masterpages in ASP.Net

You need to obtain the clientID of the control you're replacing with CDEditor. In the case below we're using a asp Textbox control exactly like the example in the is article. To get that value use the following code:

<asp:TextBox ID="TextBox1" TextMode="MultiLine" runat="server"></asp:TextBox>
<script type="text/javascript">
var textbox = document.getElementById('<%= TextBox1.ClientID %>');

It's that simple. Use whatever code behind you need to save the data from the editor.
I use a simple trick (altought its just and improvissed one)... on the "slave" page, i save the textarea clientid in the session this way (on the page_load)

HttpContext.Current.Session("id_textarea") = textarea.clientid

Then in the masterpage (on the page_load), I retrieve it

Dim clientScript As ClientScriptManager = Page.ClientScript
Dim cs As ClientScriptManager = clientScript
cs.RegisterClientScriptInclude("ScriptCKEditor", "/ckeditor/ckeditor.js")
cs.RegisterStartupScript(Me.GetType, "CKEditorScript", "CKEDITOR.replace('" & HttpContext.Current.Session("id_textarea") & "');", True)

This way works without problems in masterpages :)

error in updatepanel
if the ckeditor is inside of an updatepanel, as long as async postback occurs, the ckeditor box will be gone, and the original textbox comes back
i tried to add the ScriptManager.RegisterStartupScript to register the ckeditor.replace(xxxx) at my code behind, it still does not work
any help or advices? tks
CKEditor when using a Master Page
Your article was very useful, but can CKEditor be used for a textbox on a form that has a master page?
Very good
Very good article, thank you for the effort!
Its loses the view state when ajax postback is fired
First of all thank you for this great article.
I encountred a problem i put the editor inside a updatepanel and i found out it doesnt hold the view state when any async ajax postback is done how i can fix this please ,,,,
Doubled output
Whatever content I enter in my instance of ckeditor comes back doubled when i hit 'Save'. I quadruple checked my code, but I don't get it. Can you help me?
Image Upload
Can you show how to configure the image upload part?