Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
SQL Server

How to use CKEditor in ASP.NET

Author: Jeff Nava

This article will explain how we can use or integrate CKEditor in our ASP.NET page.

CKEditor is one of the most well-known and accepted text HTML editors for web pages. It is an open source application used for data entry in web pages. CKEditor provides popular editing features on a web page that we use in desktop word processors such as styles formatting web resource linking, a safe undo function, paste from word and other common HTML formatting tools. CKEditor is being used widely by developers in their web applications and even we are using CKEditor to post articles on DevASP.NET. It is very simple and easy for developers to integrate CKEditor in their web pages and it is also very easy to do editing in CKEditor.

CKEditor code is written in JavaScript. The first version of CKEditor is released in 2003 with the name of FCKEditor and after few years it was completely redesigned and its name was changed to CKEditor. CKEditor loads much faster than FCKEditor.It can be used or integrated with ASP, JAVA, JavaScript, PHP, ColdFusion, Perl, Ruby and Python but here we will see how it can be included in a ASP.NET web page.

First download CKEditor For ASP.NET integration from official site, extract it and follow below steps.

  1. Open Visual Studio 2012
  2. File > New > Website
  3. Visual basic or Visual C# > ASP.NET Empty Web Site
  4. Web Site > Add Reference >
  5. Browse to the bin folder where you extracted the CKEditor
  6. Add CKEditor.NET.dll to your website
  7. Now copy ckeditor (all small) folder from your extracted folder and paste it into your website folder
  8. Website > Add New Item > Web Form
  9. Add following line of code after page tag in your aspx file

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

  10.  Write below code in between form tag of aspx page

     <CKEditor:CKEditorControl ID="CKEditor1" BasePath="/ckeditor/" Width="1000px" Height="300px" runat="server">
     <asp:Label ID="lblText1" runat="server">asp:Label>
     <br />
     <asp:Label ID="lblText2" runat="server">asp:Label>
     <br />
     <asp:Button ID="btnShowText" runat="server" Text="Show Text" OnClick="btnShowText_Click" />

  11. Now write code below in button click event in vb or cs file


    protected void btnShowText_Click(object sender, EventArgs e)
      string text = CKEditor1.Text;
      lblText1.Text = Server.HtmlEncode(text);
      lblText2.Text = Server.HtmlDecode(text);

    Protected Sub btnShowText_Click(sender As Object, e As EventArgs)
      Dim text As String = CKEditor1.Text
      lblText1.Text = Server.HtmlEncode(text)
      lblText2.Text = Server.HtmlDecode(text)
    End Sub

    HTMLDecode displays the text as you have written in the editor. It considers your formatting and displays text. On the other hand HTMLEncode displays html of the text.

  12. Press F5. Write any text in CKEditor and format text according to your requirement and see the result
Add Article Comment:
Name :
Email Address :
Comments :
<< How to clean a string in ASP.NET using comma separated values from database

Disclaimer - Privacy
© 2002-2017