Use ckeditor3.6.4 and ckfinder2.3 in ASP. NET to upload a text editor.

Source: Internet
Author: User

Note: ckeditor and ckfinder are set slightly differently only in ASP. NET web projects and on ASP. NET websites.

1. ckeditor Configuration:

Ckeditor is a replacement version of FCKeditor, which is more powerful than FCKeditor.

Download: for the development of Asp.net, you can go to the official website http://ckeditor.com/downloaddownload, and directly find ckckeditor for ASP. NET to download. Download and decompress the package.

Add the source file to the project: Decompress the package and copy the ckeditor folder in the ckeditor_aspnet_3.6.2 \ _ samples folder to the root directory of the project in the Solution Explorer of Visual Studio.

Add reference: add reference to the project and add ckeditor. net. dll in the ckeditor_aspnet_3.6.2 \ _ samples \ bin folder to the project.

Configuration: In web. config:

<Pages>
<Controls>
<Add namespace = "ckeditor. Net" assembly = "ckeditor. Net" tagprefix = "ckeditor"/>
</Controls>
</Pages>

2. ckfinder Configuration:

Download: Go to http://ckfinder.com/downloaddownload, and select asp.netto download and decompress.

Add source file to project: Decompress the package and copy the ckfinder_aspnet_2.3 \ ckfinder folder to the root directory of your project. Then, delete the _ samples, _ source, and bin folders in the ckfinder_aspnet_2.2.2 \ ckfinder folder (these folders generate ckfinder. dllProgramSet and used for testing ).

Add reference: Add ckfinder. dll under ckfinder_aspnet_2.3 \ ckfinder \ bin \ debug to the website reference. (Note: You can also not add this reference. If you need to bind ckeditor to ckfinder, You Need ).

3. Build the page:

Add the ckeditor control to the test page,

(1) If the current web application is webapplication, the path of the relevant properties is set as follows, which is applicable to the direct deployment of the website on IIS in the future:

<Form ID = "form1" runat = "server">
<Div>
<Ckeditor: ckeditorcontrol runat = "server" id = "editor1"
Filebrowserbrowseurl = "/ckfinder/ckfinder.html"
Filebrowserflashbrowseurl = "/ckfinder/ckfinder.html? Type = flash"
Filebrowserflashuploadurl = "/ckfinder/CORE/connector/aspx/connector. aspx? Command = quickupload & amp; type = flash"
Filebrowserimagebrowseurl = "/ckfinder/ckfinder.html? Type = images"
Filebrowserimageuploadurl = "/ckfinder/CORE/connector/aspx/connector. aspx? Command = quickupload & amp; type = images"
Filebrowseruploadurl = "/ckfinder/CORE/connector/aspx/connector. aspx? Command = quickupload & amp; type = Files "> </ckeditor: ckeditorcontrol>
</Div>
</Form>

(2) If the current website is website, the path settings of the relevant properties are as follows. This setting is applicable to deploying it as a virtual directory on IIS in the future:

<Form ID = "form1" runat = "server">
<Div>
<Ckeditor: ckeditorcontrol runat = "server" id = "editor1"
Filebrowserbrowseurl = "ckfinder/ckfinder.html"
Filebrowserflashbrowseurl = "ckfinder/ckfinder.html? Type = flash"
Filebrowserflashuploadurl = "ckfinder/CORE/connector/aspx/connector. aspx? Command = quickupload & amp; type = flash"
Filebrowserimagebrowseurl = "ckfinder/ckfinder.html? Type = images"
Filebrowserimageuploadurl = "ckfinder/CORE/connector/aspx/connector. aspx? Command = quickupload & amp; type = images"
Filebrowseruploadurl = "ckfinder/CORE/connector/aspx/connector. aspx? Command = quickupload & amp; type = Files "> </ckeditor: ckeditorcontrol>
</Div>
</Form>

 

Note: These URL-related attribute configurations are the key to connecting ckeditor and ckfinder (Asp.net version ). For other versions, see: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_ (Uploader)

Many othersArticleIt can also be configured in config. js of ckeditor. The above URL attribute is not required. Changed:

VaR instance = ckeditor. Instances ['editor1'];

If (Instance) {ckeditor. Remove (instance );}

Ckeditor. Replace ('editor1 ',
{
Filebrowserbrowseurl: '/ckfinder/ckfinder.html ',
Filebrowserimagebrowseurl: '/ckfinder/ckfinder.html? Type = images ',
Filebrowserflashbrowseurl: '/ckfinder/ckfinder.html? Type = flash ',
Filebrowseruploadurl: '/ckfinder/CORE/connector/aspx/connector. aspx? Command = quickupload & type = files ',
Filebrowserimageuploadurl: '/ckfinder/CORE/connector/aspx/connector. aspx? Command = quickupload & type = images ',
Filebrowserflashuploadurl: '/ckfinder/CORE/connector/aspx/connector. aspx? Command = quickupload & type = flash'
});

Note: Because the ckeditor control is usedCodeThe first two rows are very important; otherwise, duplicate IDs are prompted.

To use the ckeditor control on the master page, use the clientid attribute.

4. Configure ckfinder to allow client upload:

(1) first find config. ascx in the ckfinder folder and open it.

Modify the checkauthentication () method and change "Return false" to "Return true". (If you have not modified the method, It should be 20th lines of code)

(2) If you want to modify the default path used to store uploaded files, you can modify the baseurl (34th lines of code by default) in the setconfig () method to specify a custom folder, note that the folder must have write permission. By default/Ckfinder/userfiles/(applicable to webapplication). If it is a website, set the path ~ /Ckfinder/userfiles/

By default, image files are stored in userfiles/images/, Flash files are stored in userfiles/flash/, and files are stored in userfiles/files/

In this way, you can upload files.

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.