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: http://ckeditor.com/demo#skin
* 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?

Steps:

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: http://ckeditor.com/download

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 


Comments


Mumbai commented on 10/11/2018 10:28:49 AM

pp
     

shape globe for seo commented on 10/11/2018 11:06:45 AM

I will see that you are an authority at your control! I am pushing a web site quickly. additionally, your records may be astoundingly useful for me. much gratitude to you for all your assistance and wishing every one of you of the achievement to your undertaking.

     

brands of cbd hemp oil commented on 10/11/2018 12:04:50 PM

Satisfactory put up! That is a very excellent blog that changed into able to definitively come again to extra times this 12 months! Thanks for informative post. This modified into a truly exceptional contest and optimistically I'm able to attend the following one. It changed into a number of amusing and I truly enjoyed myself.
     

Online Arino shoes commented on 10/13/2018 10:59:31 AM

It is ending up obvious that microorganisms have a momentous capacity to recreate their genomes even with ecological anxieties, and that at times their aggregate associations with infections might be urgent to this. In such a circumstance, how substantial is the specific idea of a life form in detachment? It appears that there is a progression of vitality motion and instructive exchange from the genome up through cells, network, virosphere, and condition.

     

best law firm rankings commented on 10/17/2018 9:48:17 AM

I needed to a debt of gratitude is in order for this momentous read!! I completely appreciated each and every tad of it. I have you bookmarked your website page to try out the fresh out of the box new things you post.
     

best roofing supply commented on 10/29/2018 8:47:34 AM

There are heaps of records here that can assist any undertaking with beginning with a productive individual to individual correspondence campaign. I am energized by the records you have in this weblog. It prescribes how enjoyably you see this issue.

     

Pakistani men shoes commented on 11/3/2018 10:17:14 AM

Very useful information shared in this article, nicely written! I will be reading your articles and using the informative tips. Looking forward to read such knowledgeable articles. With this I can have an idea of writing my own blogs with good content.

     

Your Comment:






Blog Home   SBP Home
RSS Feed       Contact




Archives




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