How to use ASP.net ckeditor Editor _ Practical Skills

Source: Internet
Author: User
Tags cdata
1. Download the CKEditor and put it in the website directory. Address: http://ckeditor.com/
Referencing 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
Copy Code code as follows:

<script type= "Text/javascript" >
<! [cdata[
Ckeditor.replace (' <%=mckeditor. ClientID%> ',//Mckeditor. ID seen by the corresponding client generated by the ClientID for textbox Mckeditor
{
Skin: ' office2003 ',//Set skin
Entermode:number (2),//Set Enter 1.<P>2 for <br/>3 <div>
Shiftentermode:number (1),//Set Shiftenter input
});
]]>
</script>

Like the above can complete the basic functions, but sometimes we want to upload files, cfeditor file function is implemented through Plug-ins, the following describes the file plug-in Ckfinder configuration
1. To the http://www.ckfinder.com/download plugin (the idea chooses the asp.net version), puts to the website directory
2. Add the following code after the previous CKEditor configuration information
Copy Code code 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/" in the Config.ascx file (file upload directory) and checkauthentication () upload the authentication.
4. Exclude the FCKeditor related files in the sample folder, or delete them directly. (Referencing the FCKeditor-related namespaces)
There are fckeditor.aspx popup.aspx popups.aspx. three files
Should be used after the basic no problem, but if there are several places in the project to use the editor, it is necessary to write a piece of configuration information every place is not very troublesome, so do a simple control, the code is as follows: Ascx file
Copy Code code 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:
Copy Code code 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)
{
}

Where to use just drag the control over, the background code page is very simple mpckeditor1.value can assign value to it or get a value
Copy Code code as follows:

<uc1:mpckeditor id= "Mpckeditor1" runat= "Server" value= "Madman to test" > </uc1:mpckeditor>
protected void Button1_Click (object sender, EventArgs e)
{
Response.Write ("<script language= ' JavaScript ' >alert ('" + httputility.htmlencode (mpckeditor1.value) + ";") </script> ");
}

Ok
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.