How to integrate a CKEditor in ASP.Net application

Feb 27, 2014 by Alexandra

What is a rich text editor?

Most applications available require a small amount of user interaction, such as username and password input, however there are some applications that expect more than two simple texts from the user. For example, if you are in the process of developing a website that expects the visitors to create, let's say - a simple message template which could contain Bold text, symbols such as: Ø, ►, ¶ or perhaps, images , that's when you need a rich text editor, not a simple textbox.

What is CKEditor?

CKEditor is a ready-to-use rich text editor that can be easily integrated into most web applications. For further details, you can also check out the official site .

Why you should use CKEditor

If you are in the process of developing an application that has to integrate either a simple HTML editor or a rich text editor, then CKEditor is the right solution for you. Here are some advantages:

* First of all, this is an Open Source application, which means that it's 100% free
* More available skins (such as Moono or Kama) can be found at:
* CKEditor features can be easily customized according to your application's needs
* Big companies such as IBM, Oracle or Adobe have already integrated it into their applications

So here you can see an example of how the editor displays a web page's content, during the editing process:

CKEditor features

and here is the HTML5 code that is generated:

 Generated HTML5 code

How to integrate CKEditor in an ASP.Net application?


1. The first step in integrating the CKEditor is to download the latest versions of the CKEditor 3.x and the CKEditor for APS.NET control from the official website:

2. Unpack the CKEditor 3.x package and copy its contents to the application folder of the project you wish to integrate it

3. Unpack the CKEditor for ASP.NET control and copy the CKEditor.NET.dll library to the References folder of your project. The DLL file is found at the following path: bin\Release\CKEditor.NET.dll

4. Within your solution, add a reference to the newly copied library.

5. Don't forget to register the CKEditor control within the page that will integrate it, such as:

<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>

6. The final step is to insert an instance of the control into the body of the page and to set it's base path to the directory which contains the CKEditor copied at step 2. An example of how you can use the control:

<CKEditor:CKEditorControl ID="ckTextEditor" BasePath="~/ckeditor/" runat="server" ClientIDMode="Static" />

Issues that might appear during the integration of CKEditor

In case the CKEditor control does not display correctly, manually edit the paths set within the controller properties, such as BasePath, ContentCss and TemplateFiles.

In case your application needs the editor text to be saved in a SQL database, do not forget to set the field type as nvarchar(MAX), since the user might want a larger text input. Also, nvarchar can accept Unicode text, whereas varchar can accept only ASCII.

Note: only use ntext as field type if you are working with SQL Server versions earlier than 2005. The ntext type is considered by most as being obsolete (similar to text and image), so Microsoft recommends replacing it with nvarchar(max), varchar(max) and varbinary(max).

So this is the tutorial on how to integrate a CKEditor in ASP.Net application, if you have any questions, suggestions, I'll be looking forward to reading them :)

Tags: How To  HTML5  Tutorial 


No comments yet.

Your Comment:

Blog Home   SBP Home
RSS Feed       Contact

 Blog Archives  |  Terms of Use  |  Privacy Policy
© 2017 SBP Romania. All rights reserved.