Integration of CK Editor in ASP.NET

CK Editor in ASP.NET 

CKEditor (formerly known as FCKeditor) is a WYSIWYG rich text editor which enables writing content directly inside of web pages or online applications. Its core code is written in JavaScript and it is developed by CKSource. CKEditor is available under open source and commercial licenses.

Steps to follow:-

1. Open New Project (File -> New -> Project -> ASP.NET Empty Web Application)

2. Name the Project as like "IntegrationofCKEditor".

Download the attached Zip file(CKEDditor.zip) and extract(download from this link )

3. You will find a bin folder when you extract the CKEditor.zip

4. Go to the Solution explorer
[References->Right
Mouse Click -> Add References->Browse-> Then browse the bin folder of the extracted (CkEditor.zip) -> Select The Two DLLs
(CKEditor.dll & CKEditor.Net.dll)->OK]

5. Please copy the extracted ckeditor folder in newly created project. This is essential and important for integration of ckeditor in asp.net.

6. Copy this folder and paste it in your project.

7. Then add a new aspx page to the project.as shown below.

Design Page: IntegrationOfCkEditor.aspx


<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IntegrationOfCkEditor.aspx.cs" Inherits="DemoApp.IntegrationOfCkEditor" %>
<script src="ckeditor/ckeditor.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
       <form id="form1" runat="server">
    <div>
   <CKEditor:CKEditorControl ID="CKEditor1" BasePath="/ckeditor/" runat="server">
   </CKEditor:CKEditorControl>
</div>
        <asp:Panel ID="Panel1" runat="server" Visible="false">
        <asp:Label ID="lblpre" runat="server" Text="" ></asp:Label>
        </asp:Panel>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />

    </form>
</body>
</html>

Code Page: IntegrationOfCkEditor.aspx.cs

using System;
using System.Configuration;
using System.Data.SqlClient;

namespace DemoApp
{
    public partial class IntegrationOfCkEditor : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
      
        }

        protected void Button1_Click(object sender, EventArgs e)
        {            
             
        }
    }
}

Output:-

This below image shows the integration of ckeditor in asp.net

CKEditor in ASP.NET
integrated ckeditor in asp.net




Comments :

Post a Comment