How to Use ckeditor in ASP. NET

1. Download ckeditor and put it in the website directory. Address: http://ckeditor.com/


Reference JS

<script language="javascript" type="text/javascript" src='<%=ResolveUrl("~/ckeditor/ckeditor.js")%>'></script>

3. Add an edit box

<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>

4. Add the following code below:

The Code is as follows:

<script type="text/javascript">

//<![CDATA[

CKEDITOR.replace( '<%=mckeditor.ClientID %>',// Mckeditor. clientid is the ID of the client generated by textbox mckeditor.

{

skin : 'office2003',// Set skin

enterMode : Number( 2),// Set enter 1. <p> 2 to <br/> 3 to <div>

shiftEnterMode : Number( 1), // Set the shiftenter Input

});

//]]>

</script>

The basic functions can be completed in this way, but sometimes we need to upload files. The file function of cfeditor is implemented through the plug-in. The following describes the ckfinder configuration of the file plug-in.

1. to http:// Www.ckfinder.com/download the plug-in (the idea is to select Asp.net) and put it under the website directory.

2. Add the following code after the previous ckeditor configuration information

The Code is as follows:

filebrowserBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html")%>',

filebrowserImageBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Images")%>',

filebrowserFlashBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Flash")%>',

filebrowserUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files")%>',

filebrowserImageUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images")%>',

filebrowserFlashUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash")%>'

3. Modify baseurl = In the config. ascx file."/uploads/"(File Upload directory) and checkauthentication () Upload identity authentication.

4. Exclude files related to FCKeditor in the sample folder, or delete them directly. (Reference The namespace related to FCKeditor)

There are three files: FCKeditor. aspx Popup. aspx popups. aspx.

It is basically okay to use it later, but if the editor is used in several places in the project, it is not very troublesome to write a piece of configuration information everywhere, so a simple control is made, the Code is as follows: ascx File

The Code is as follows:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="mpckeditor.ascx.cs" Inherits="mpckeditor" %>

<script language="javascript" type="text/javascript" src='<%=ResolveUrl("~/ckeditor/ckeditor.js")%>'></script>

<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>

<script type="text/javascript">

//<![CDATA[

CKEDITOR.replace( '<%=mckeditor.ClientID %>',

{

skin : 'office2003',

enterMode : Number( 2),

shiftEnterMode : Number( 1),

filebrowserBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html")%>',

filebrowserImageBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Images")%>',

filebrowserFlashBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Flash")%>',

filebrowserUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files")%>',

filebrowserImageUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images")%>',

filebrowserFlashUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash")%>'

});

//]]>

</script>

CS file:

The Code is as follows:

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class mpckeditor : System.Web.UI.UserControl

{

public string value

{

set { mckeditor.Text = value; }

get { return mckeditor.Text; }

}

protected void Page_Load(object sender, EventArgs e)

{

}

You only need to drag the control to use it. The background code page is very simple and the value can be assigned or obtained by the mpckeditor1.value.

The Code is as follows:

<uc1:mpckeditor id="Mpckeditor1" runat="server" value="Test with a madman"> </uc1:mpckeditor>

protected void Button1_Click(object sender, EventArgs e)

{

Response.Write("<script language='javascript'>alert('" + HttpUtility.HtmlEncode(Mpckeditor1.value) + ";')</script>");

}