Summary FCKeditor configuration and installation

Source: Internet
Author: User

For ASP. NET developers, you have two options:

1. Use FCKeditor only to downloadHttp:// Group_id = 75348 & package_id = 75845And then configure several core JS files. This is not the topic discussed in this article.

2. Use FCKeditor. Net to downloadHttp:// Group_id = 75348 & package_id = 137125. It must be declared that this file is only an ASP. NET control DLL file, and does not include the FCKeditor editor kernel. So you should also download the file package mentioned in the previous method.


The following describes how to install and configure FCKeditor in combination with an ASP. net2.0 project. Before you start, download the FCKeditor package and the FCKeditor. NET Server Control. Enable vs2005 to create a C # web site project named fckpro.



The so-called installation is a simple copy process.

Decompress the downloaded package to the root directory of fckpro, so that the root directory will get a FCKeditor folder containing all the core files of FCKeditor.

Then decompress the downloaded file to an empty directory on your hard disk, which is from FCKeditor. net.Source code(Based on. net1.1 C # project), you can use vs2003 to re-develop it. This article does not involve this content, but we just use FCKeditor directly. in the \ bin \ release directory of the net project directory. fckeditorv2.dll file.

Add a reference to fredck. fckeditorv2.dll in vs2005:

1. Right-click the fckpro project browser and choose add reference ...), Find the Browse tab, locate the extracted fredck. fckeditorv2.dll, and click OK. In this case, a bin folder is added to the fckpro project directory, which contains the fredck. fckeditorv2.dll file. Of course, you can also manually copy fredck. fckeditorv2.dll directly to fckpro \ bin \. vs2005 will automatically compile it during compilation.

2. to facilitate rad development, we also add the FCKeditor Control to the toolbox of Vs, expand the common label Group of the Toolbox (general), right-click the component (choose items ...), Find the Browse button in the dialog box, locate fredck. fckeditorv2.dll, and then confirm. The toolbox is displayed.

My experience tells me that this will save a lot of declarations to be added when using the FCKeditor Control during development.Code.


So far, you have completed FCKeditor installation and can use FCKeditor in your project. Of course there are many things to be configured later.


FCKeditorInASP. net2.0 WebConfiguration in the project:

Now, I will apply FCKeditor to our project. Open default. aspx: switch to the design mode. Drag the FCKeditor Control from the toolbox and you will be able to see the FCKeditor on the default page. However, you can only see the position frame of one FCKeditor, you will not see the running effect. After you select fckeditor1, you can set some basic attributes of this FCKeditor object on the property panel. The more important thing is the basepath attribute. If FCKeditor was previously set to FCKeditor in the root directory, it would be ~ /FCKeditor/. If it is another directory name, replace it with the corresponding value (Note: The default value of the control is/FCKeditor /, because the runat = "server" attribute is set for the server control, you must explicitly declare basepath = "~ /FCKeditor /"). Switch default. aspx to source. We can see the code automatically generated by IDE:



If you didn't add FCKeditor to the toolbox, You Should manually add the code after adding the reference.

In source code mode, place the cursor over the fckeditorv2: FCKeditor TAG content, which is displayed in bold. Then, all the properties of the FCKeditor server control are displayed on the property panel, this is much more than the design pattern.

Attribute list:









































Event list:








The usage of the above attributes and events will not be repeated here. Please explore it by yourself. At present, I have not found any relevant information, but it is not very difficult, if you have experience using FCKeditor in ASP, you should understand the meaning of some of these attributes, and fckconfig. JS settings have the same meaning. I will sort it out later. It must be noted that fckeditor2.2 fckconfig. js and fckeditor2.2 have been greatly improved, with smaller sizes and more flexible configuration methods. Please download and compare them on your own.

For this example, the configuration code is as follows:

Id = "fckeditor1"

Runat = "server"

Autodetectlanguage = "false"

Defaultlanguage = "ZH-CN"

Basepath = "~ /FCKeditor/">

Now, run this page to allow you to modify web. config (in this way, the IDE will automatically add a web. config file under the project ). See the results!

Someone may ask: how to getHTTP Error 404-not found.? This error is generally caused by incorrect basepath settings. Refer to the basepath precautions mentioned above and check carefully!

At this point, the configuration of FCKeditor is not actually completed, because it contains a powerful feature we have not configured correctly: file upload.

In default. in aspx running mode, click the "insert/edit image" (or flash) function of FCKeditor. In the pop-up box, click "Browse server" and a dialog box appears, the following error message is displayed: XML request error: forbidden (403 ).

If you get such errors, web development experience knows that 403 should be a read/write permission problem. But why? The reason is that the userfiles path is not configured.

Create an empty directory named files in the root directory of fckpro. The common practice of setting basepath together with basepath is as follows:

Open the Web. config file of the fckpro project and modify the appsettings element. The configuration is as follows:



After FCKeditor: basepath is set, you no longer need to specify the basepath attribute every time you use the FCKeditor instance. FCKeditor: userfilespath is the directory where all uploaded files are located. You may ask why you want to set it to/fckpro/files instead ~ /Files, because FCKeditor uses this value to return the relative path of the uploaded file to the client ,~ /Files can be compiled and interpreted by ASP. NET in the service, but the static files on the client do not understand what this is. If you use ~ /Files, the returned paths of all uploaded files are ~ /Files, you will get the link http ://~ /Files/image/logo.gif. So we need to set it like the above. This is in the development phase. If the project is released after completion, remember to change/fckpro/files to/files. The principle is not clear to everyone, in the development phase, the URL of vs2005 when running the project isHttp: // localhost/project name/. After the project is published, a site is created on the server. The URL is in the form of you must change it later. These are common errors that occur when fckeditor2.2 + ASP. net2.0 is used, and the cloud is unknown.

Don't be happy first. This upload function is still the most crucial step. Find fckconfig in the root directory of FCKeditor (fckpro/FCKeditor. open the JS file in a text editor. Find it in about 132 lines (probably because you may have changed the file by referring to other materials:


VaR _ filebrowserlanguage = 'asp '; // ASP | aspx | CFM | lasso | Perl | PHP | py

VaR _ quickuploadlanguage = 'asp '; // ASP | aspx | CFM | lasso | PHP


Change the value of the values of the two row assignment codes from ASP to aspx and save and close the file.

Okay, you're done! Run the fckpro project here and use the Browser Server function. OK?


I would like to mention:

Solution for XML request error: internal server error (500) when using the file upload function in development.

What is the internal Error 500?

Because ASP. net2.0 has the theme feature added, if you use stylesheettheme or theme for Web. config in your project, you need to modify it more.

To the directory where FCKeditor is located, open \ editor \ filemanager \ upload \ aspx \ upload. aspx and \ editor \ filemanager \ browser \ Default \ connectors \ aspx \ connector. aspx files: Add theme = "" Or stylesheettheme = "" to the page tab to modify theme when you are using the project. The modification is as follows:


In this way, the internal Error 500 is solved.

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: 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.