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".
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]
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
| integrated ckeditor in asp.net |
No comments:
Post a Comment