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. js ") %> '> </script>
3. Add an edit box
<Asp: TextBox ID = "mckeditor" runat = "server" TextMode = "MultiLine"> </asp: TextBox>
4. Add the following code below:
Copy codeThe 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 ', // sets the skin
EnterMode: Number (2), // set enter to 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. Go to http://www.ckfinder.com/download the plug-in (the idea is to select asp.net) and put it in the website directory.
2. Add the following code after the previous ckeditor configuration informationCopy codeThe 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 the BaseUrl = "/uploads/" (File Upload directory) and CheckAuthentication () Upload authentication in the config. ascx file.
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 FileCopy codeThe Code is as follows: <% @ Control Language = "C #" AutoEventWireup = "true" CodeFile = "mpckeditor. ascx. cs" Inherits = "mpckeditor" %>
<Script language = "javascript" type = "text/javascript" src = '<% = ResolveUrl ("~ /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:Copy codeThe 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.Copy codeThe Code is as follows: <uc1: mpckeditor id = "Mpckeditor1" runat = "server" value = "crazy test"> </uc1: mpckeditor>
Protected void button#click (object sender, EventArgs e)
{
Response. Write ("<script language = 'javascript '> alert ('" + HttpUtility. HtmlEncode (Mpckeditor1.value) + "; ') </script> ");
}
OK