HTML Editor in ASP.Net(CKEditor along with open source FileManager Integration)


.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CKEditorinASP_Net.WebForm1" %>

<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="lblmessage" runat="server" ForeColor="Red"></asp:Label>
    </div>
    <div>
        <CKEditor:CKEditorControl ID="CKEditor1" runat="server">
        </CKEditor:CKEditorControl>
    </div>
    <div>
        <table>
            <tr>
                <td>
                    File Name(Without Extension)
                </td>
                <td>
                    <asp:TextBox ID="txthtmlfilename" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:Button ID="btnsavehtml" runat="server" Text="Save as HTML File" OnClick="btnsavehtml_Click" />
                </td>
            </tr>
        </table>
    </div>
    <br />
    <div>
        <asp:GridView ID="gridfileslist" runat="server" Caption="Files List" CaptionAlign="Top"
            AutoGenerateColumns="false" OnRowDataBound="gridfileslist_RowDataBound">
            <Columns>
                <asp:TemplateField HeaderText="File Name">
                    <ItemTemplate>
                        <asp:Literal runat="server" ID="ltlFileItem"></asp:Literal>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>


.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

namespace CKEditorinASP_Net
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                GetListFiles();
            }
        }

        private void GetListFiles()
        {
            var currentDirInfo = new DirectoryInfo(Server.MapPath("~/HTMLFiles/"));
            var files = currentDirInfo.GetFiles();
            gridfileslist.DataSource = files;
            gridfileslist.DataBind();
        }

        protected void gridfileslist_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                var item = e.Row.DataItem as FileInfo;
                var ltlFileItem = e.Row.FindControl("ltlFileItem") as Literal;
                ltlFileItem.Text = string.Format(@"<a href=""{0}"" target=""_blank"">{1}</a>",
                            Page.ResolveClientUrl(string.Concat("~/HTMLFiles", "/", item.Name)),
                            item.Name);

            }
        }

        protected void btnsavehtml_Click(object sender, EventArgs e)
        {
            string fileLoc = Server.MapPath("~/HTMLFiles/" + txthtmlfilename.Text.Trim() + ".html");
            //create file
            FileStream fs = null;
            if (!File.Exists(fileLoc))
            {
                using (fs = File.Create(fileLoc))
                {

                }
                if (File.Exists(fileLoc))
                {
                    string content = CKEditor1.Text;
                    using (StreamWriter sw = new StreamWriter(fileLoc))
                    {
                        sw.Write("<html><head><title>" + txthtmlfilename.Text.Trim() + "</title></head><body>");
                        sw.Write(content);
                        sw.Write("</body></html>");
                    }

                    lblmessage.Text = "File Created Successfully.";
                }
                else
                {
                    lblmessage.Text = "File Not Found.";
                }
            }
            else
            {
                lblmessage.Text = "File Already Exists.";
            }
            //writing html code into file

            GetListFiles();
        }
    }
}

Installation Procedures
To install CKEditor for the first time, proceed in the following way:          
1.     Download the latest version of the editor from our website: http://ckeditor.com/download
2.     Extract (decompress) the downloaded archive to a directory called ckeditor in the root of your website.

If you want to integrate CKEditor with your ASP.NET page, follow the steps outlined below.
1.     Go to the official CKEditor download site and download the latest versions of both CKEditor 3.x and the CKEditor for ASP.NET control.
2.     Unpack both installation packages to a desired location.
3.     Add a reference to the CKEditor for ASP.NET Control to your website.
In Visual Studio use the Add Reference command and browse to bin\Release\CKEditor.NET.dll file from the unpacked CKEditor for ASP.NET installation package. You can also manually copy the DLL file to the bin folder of your application.
4.     Copy the unpacked editor files from the CKEditor 3.x installation package and paste them into the application directory of your website.
5.     Register the CKEditor for ASP.NET control in your page:
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
6.     Insert a CKEditor instance into the page body:
<CKEditor:CKEditorControl ID="CKEditor1" BasePath="/ckeditor/" runat="server"></CKEditor:CKEditorControl>

To download latest version of CKEditor(CKEditor for ASP.NET and CKEditor) visit http://ckeditor.com/download
For full documentation visit CKEditor official website  http://ckeditor.com/


FileManger Integration for CKEditor (Configuration)

1)      ckeditor\config.js
CKEDITOR.editorConfig = function( config )
{
       // Define changes to default configuration here. For example:
       // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.filebrowserBrowseUrl = '../Filemanager/index.html';
};

2)  Filemanager\connectors\ashx\filemanager.ashx
3)  Filemanager\scripts\filemanager.config.js
4)  Filemanager\scripts\filemanager.js

You Can Download the Working Code of HTML Editor in ASP.Net(CKEditor along with open source FileManager Integration) From here.