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.
First download CKEditor For ASP.NET integration from official site, extract it and follow below steps.
- Open Visual Studio 2012
- File > New > Website
- Visual basic or Visual C# > ASP.NET Empty Web Site
- Web Site > Add Reference >
- Browse to the bin folder where you extracted the CKEditor
- Add CKEditor.NET.dll to your website
- Now copy ckeditor (all small) folder from your extracted folder and paste it into your website folder
- Website > Add New Item > Web Form
- Add following line of code after page tag in your aspx file
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
- 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>
<asp:Label ID="lblText2" runat="server">asp:Label>
<asp:Button ID="btnShowText" runat="server" Text="Show Text" OnClick="btnShowText_Click" />
- 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)
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.
- Press F5. Write any text in CKEditor and format text according to your requirement and see the result