Introduction
This article is about how to use CKEditor non ASP.NET version in ASP.NET web page. So now you can use an HTML editor in ASP.NET without using the AJAX control tool or AJAX assembly file.
Code
Here is the code for the web page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Editor" validateRequest="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>HTML Editor</title>
<script type="text/javascript" src="ckeditor.js"></script>
<script src="~/js/sample.js" type="text/javascript"></script>
<link href="~/js/sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function GetContents() {
var oEditor = CKEDITOR.instances.editor1;
document.getElementById('<%=Hidden1.ClientID%>').value = oEditor.getData();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="Hidden1" runat="server" />
<textarea cols="100" id="editor1" name="editor1" rows="10"></textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace('editor1');
</script><br />
<asp:Button ID="Button1" runat="server" Text="Show" BackColor="#999999"
Font-Bold="True" ForeColor="White" Height="30px" Width="100px"
onclick="Button1_Click" OnClientClick="GetContents()" />
<div id="cnt" runat="server"></div>
</form>
</body>
</html> When you will click on Show button the contents of Editor will be saved in Hidden Field control using the GetContents() function. After that use the value of Hidden Field in code behind file as given below.
Code behind c# file :
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Editor : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
cnt.InnerHtml = Hidden1.Value;
}
} I am using Hidden Field value in a <div> to show HTML editor contents. You can use this value to store in database also.
Points to remember
Set the validateRequest="false" in web page . Set <httpRuntime requestValidationMode="2.0" /> in web config file.
Demo
Here is the
demo about this article.
