Ckeditor and ckfinder work together to develop the Asp.net content Publishing Page

Source: Internet
Author: User

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.2.2 \ ckfinder folder to your project root directory. Then, delete the _ samples, _ source, and bin folders in the ckfinder_aspnet_2.2.2 \ ckfinder folder (these folders generate the ckfinder. dll assembly and are used for testing ).

Add reference: Add ckfinder. dll under ckfinder_aspnet_2.2.2 \ 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:

<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 other articles have said that configuration in ckeditor's config. JS is also possible. 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 used, the first two lines in the above Code 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.

 

In this way, you can upload files.

 

 

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.