Set the latest and most complete configuration method in Asp.net + FCKeditor (embedded text editor)

FCKeditor introduction:

Official Website http://www.fckeditor.net/
Official Document http://wiki.fckeditor.net/
Http://www.fckeditor.net/download/default.html
Official demonstration http://www.fckeditor.net/demo/default.html
Download
Fckeditor2.6.4zip is its latest Javascript file and image;
Fckeditor.net.zip is an ASP. NET control DLL file.

Enable vs to create a C # web site project named fckpro.

 

FCKeditor installation:

The so-called installation is a simple copy process. Decompress the downloaded fckeditor2.6.4.zip 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 fckeditor.net.zip file to an empty directory on your hard disk, which is FCKeditor. net source code, you can re-develop it, we just directly use the "bin" DEBUG directory in the directory of fredck. fckeditorv2.dll file.

Add a reference to fredck. fckeditorv2.dll in:

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". Vs 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. At this time, the toolbox shows the control, which saves a lot of declaration code to be added when using the FCKeditor Control during development.

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

FCKeditor detailed settings:

Go to the FCKeditor folder and edit the fckconfig. js file.

 

1. This step is required and the most important step.

Modify

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

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

Change

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

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

 

2. Configure the Language Pack. English and Traditional Chinese are available. Here we use simplified Chinese.

Modify

Fckconfig. defaultlanguage = 'en ';

Is

Fckconfig. defaultlanguage = 'zh-cn ';

 

3. Configure the skin. There are default, office2003, silver style, etc. here we can use the default.

Fckconfig. skinpath = fckconfig. basepath + 'Skins/default /';

 

4. You can use the tab key in the editor. (1 is yes, 0 is no)

Change fckconfig. tabspaces = 0; To fckconfig. tabspaces = 1;

 

5. add several common font methods, such:

Modify

Fckconfig. fontnames = 'arial; Comic Sans MS; Courier New; tahoma; Times New Roman; verdana ';

Is

Fckconfig. fontnames = '; _ gb2312; Arial; Comic Sans MS; Courier New; tahoma; Times New Roman; verdana'

 

6. The default font in the editor is 12px. You can modify the style sheet to meet the requirements. Open/Editor/CSS/fck_editorarea.css and modify the font-size attribute. Such as font-size: 14px;

 

7. Security.

If your editor is used on the front-end of the Website, you have to consider security. Do not use the default toolbar on the front-end, either customize the function or use the basic defined by the system, that is, the basic toolbar,

Modify

Fckconfig. toolbarsets ["Basic"] = [

['Bold ', 'italic', '-', 'orderedlist', 'unorderedlist', '-', 'link', 'unlink ','-', 'about']

Is

Fckconfig. toolbarsets ["Basic"] = [

['Bold ', 'italic', '-', 'orderedlist', 'unorderedlist', '-',/* 'link', */'unlink ', '-', 'style', 'fontsize', 'textcolor', 'bgcolor', '-', 'smiley ', 'specialchar', 'replace ', 'preview']

];

This is the basic I changed. I removed the image function and removed the Add link function, because the image and link and flash and image button adding functions allow the front-end page to directly access and upload files, if I don't change it here, I will upload a Trojan to you. Isn't it ready?

Of course, you can also configure webconfig to ensure security. Next we will talk about it.

 

Fckpro Project Settings:

1. Configure webconfig and add it to the <etettings> node as follows:

<Deleetask>

<Add key = "FCKeditor: basepath" value = "/project name/FCKeditor/"/>

// In win2003, the files directory must have the write permission of iis_wpg users; otherwise, files may not be uploaded.

<Add key = "FCKeditor: userfilespath" value = "/project name/files/"/>

</Appsettings>

Note: basepath is the path where FCKeditor is located. FCKeditor can be written in this way directly under the website directory. If your website has more layers, make appropriate adjustments. Userfilespath is the directory of all uploaded files. We have created a new file folder and placed it in the project as the directory where the file to be uploaded is located. For convenience, it is recommended that files be separately used as a site under the wwwroot Directory, which is parallel to our site FCKeditor. Don't put it in FCKeditor. Why? Because files requires the user to have the write permission, it is dangerous to put the files in FCKeditor. The files directory must have the write permission. You can set the account based on your website requirements. This document makes it more reasonable to use an ASP. NET account to set the user conveniently.

 

2. Compile a simple page in the fckpro Project

<% @ Page Language = "C #" autoeventwireup = "true" codefile = "default. aspx. cs" inherits = "_ default" validaterequest = "false" %>

<% @ Register Assembly = "fredck. fckeditorv2" namespace = "fredck. fckeditorv2" tagprefix = "fckeditorv2" %>

// There are two main parameters

// The default value is <% @ page Language = "C #" autoeventwireup = "true" codefile = "default. aspx. cs" inherits = "_ default" %>.

// We need to add the parameter validaterequest = false. Otherwise, an error is returned when HTML code is submitted.

// The request. form value that is potentially dangerous is detected from the client.

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML xmlns = "http://www.w3.org/1999/xhtml">

<Head runat = "server">

<Title> No title page </title>

</Head>

<Body>

<Form ID = "form1" runat = "server">

<Div>

<Fckeditorv2: FCKeditor id = "fckeditor1" runat = "server">

</Fckeditorv2: FCKeditor>

& Nbsp; </div>

</Form>

</Body>

</Html>

How to get its content? Read the Value Attribute Value of the fckeditor1 control.

 

FCKeditor 2.6:

1. FCKeditor "this connector is disabled please check the" Editor/filemanager/connectors/aspx/config. aspx "error Solution

Open Editor/filemanager/connectors/aspx/config. ascx and modify the checkauthentication () method. True is returned.

C # code

View plaincopy to clipboardprint?
{
<Allowing are you so, doing? True ?. Return simply not do: Warning>
<Implement must you server. Your in files the list and upload? Anyone?>
<As>
<>
<Return>
<>
<The to]? Isauthorized? Session [as soon? True? Set is where...>
<Your in system. Logs user>

<Li>
Private bool checkauthentication () {// warning: do not simply return "true ". by doing so, you are allowing // "anyone" to upload and list the files in your server. you must implement // some kind of session validation here. even something very simple... /// return (session ["isauthorized"]! = NULL & (bool) session ["isauthorized"] = true );////... where session ["isauthorized"] is set to "true" as soon as the // user logs in your system. return true ;}

2. in the Upload File window, click browse server, and the server didn't send back a proper XML will appear ..... error message: FCKeditor later versions require different types of files to be uploaded to different directories, including directories such as file, image, falsh, and media, which must be created first.

FCKeditor Lite version

Go to the FCKeditor folder and delete all files and folders starting with "_". These are examples. Only the Editor folder and fckconfig are retained. JS, FCKeditor. JS, fckstyles. XML, fcktemplates. XML is enough;

Go to the Editor folder and delete the "_ source" folder, which also contains the source file;

Go back to the upper-level directory and enter the filemanager folder. There are two folders: browser and upload. Go to Browser "default" connectors, and retain only the aspx folder, and delete the rest; The mcpuk directory can also be deleted; the same is true for upload, and only the aspx folder;

Return to the editor and enter the images folder. The smiley folder contains emoticon icons, including MSN and fun. If you want to use your own emoticon icons, you can delete them; if you want to use the emojis here, do not delete them;

Lang contains a Language Pack. If only simplified Chinese characters are used, only fck1_agemanager is retained. JS, zh-cn.js two files on the line, it is recommended to keep en. JS (English), Zh. JS (Traditional Chinese) files, fck1_agemanager. JS is a language configuration file. With it, it can be used with fckconfig. JS settings are paired, corresponding to the corresponding language file, must be retained!

Exit the Lang folder and enter the skins folder. If you want to use the default FCKeditor milk yellow, delete the other two folders except the default folder. If you want to use other folders, it depends on your preferences.

So far, the file has been streamlined, from the original 2.55m to the current 797k. Then modify the settings.

1. Customize the basepathbasepath of FCKeditor, that is, the relative path of FCKeditor on the website. The default value is/FCKeditor/. It is best to configure it in Web. config appsettings:
<Add key = "FCKeditor: basepath" value = "/fckeditor_2.6.3/"/>

This method has many advantages:

The development environment is different from the production environment. The development environment is generally http: // localhost/hosts;

In addition, because the physical directory structure is different from the logical directory structure, errors may also occur;

If Web. config is used, different configurations can be used in the development environment. The physical path of FCKeditor is consistent with that of the production environment;
To upgrade FCKeditor, you only need to put the new version of FCKeditor in the directory of the corresponding version number and modify the configuration. In this way, different users may encounter different errors due to the client cache of static resources;
You can see the version number of your FCKeditor.

Ii. Configuration File Upload directory

You can configure the File Upload (multipart upload) Directory of FCKeditor through web. config appsettings, for example:

<Add key = "FCKeditor: userfilespath" value = "/uploadfile/FCKeditor/"/>

You can also go to/fckeditorbasepath/Editor/filemanager/connectors/aspx/config. configure in ascx, but I recommend that you do not change the content in the FCKeditor directory (fckconfig. except Js.

Iii. Format of subdirectories uploaded by custom files

We know that a folder cannot store too many files (it is said that 2000 of the Windows directory is the threshold), otherwise access to this directory will seriously affect I/O performance. FCKeditor files are stored in a single directory. I have extended FCKeditor to customize the format of the storage directory in Web. config appsettings, for example:

<Add key = "FCKeditor: folderpattern" value = "% Y/% m-% d/"/>

Take today's date as an example: the format of the generated file upload sub-directory is 2008/10-21 /.
Directories in the format of year, month, and day can be combined at will, for example:

<Add key = "FCKeditor: folderpattern" value = "% Y/% m/% d/"/>

This generated file upload subdirectory is changed to 2008/10/21/

Refer:

% Y indicates the year of the current time
% M indicates the month of the current time
% D indicates the day of the current time

Iv. Custom File Upload File Name format

FCKeditor processes file names according to the following rules: If there are no duplicate files in the current directory, the uploaded file names are the same as those in the user's PC; if there are n duplicate files, the file name added to the user's PC is example. XXX, the uploaded file name becomes: Example (n ). xxx

My project requires that the file name uploaded by the user be changed to the guid format, so I have extended the FCKeditor, in the web. config ettings can customize the format of the uploaded file, for example:

<Add key = "FCKeditor: filenamepattern" value = "% guid. % extl"/>

Such a file name as a299e63a-7d2d-493d-bbb9-99162ef5b6b8.gif

Refer:

% Guid indicates a new guid string
% FNL indicates the lower case of the source file name
% FNU indicates the capital of the source file name
% Extl indicates the lower case of the source file extension
% Extu indicates the upper case of the source file extension.

5. Resize uploaded images

Most of the scenarios that use the FCKeditor image upload function are content publishing. The content usually does not require images of several thousands of pixels. For example, in my project, the article area is 560 pixels at the widest, so I made an extension on the web. you can customize the maximum image width in config ettings:

<Add key = "FCKeditor: maxwidthofuploadedimg" value = "560" type = "regxph" text = "yourobjectname"/>

With this configuration, the width of the uploaded image is limited to 560 pixels or less.

6. Customize the domain name in the uploaded image URL
To accelerate page rendering, we can place images and other static resources in an independent domain name. However, the default Image Upload URL of FCKeditor is a relative path, for example,/fck/2008-03-01/1. jpg:

I added this extension. In web. config appsettings, you can configure the Domain Name of the uploaded image URL, for example:

<Add key = "FCKeditor: uploadedfilesdomain" value = "http://www.hong100.cn/"/>
The image address is an absolute address, for example, http: www.aa.com/fck/2008-03-01/1.jpg.

VII. Solve the Problem of "invalid file type" prompt when uploading files with Chinese characters

To solve this problem, you only need to add a configuration in Web. config:

<Location Path = "fckeditor_2.6.3/Editor/filemanager/connectors/aspx/upload. aspx">
<System. Web>
<Globalization requestencoding = "UTF-8" responseencoding = "gb2312"/>
</System. Web>
</Location>

Note:

Responseencoding is the default website code.
Fckeditor_2.6.3 is the basepath of FCKeditor.

VIII. FCKeditor Security

In FCKeditor 2.3.2, a vulnerability exists. You can use/Editor/filemanager/Browser/default/connectors/aspx/connector ctor. when aspx uploads arbitrary files to the server, my website has been attacked.

2.6.3 although no similar problems have been found, it is better to delete files that are not commonly used:

In the root directory of FCKeditor basepath:
/Editor
/Fckconfig. js
/Fckpackager. xml
/Fckstyles. xml
/Fcktemplates. xml
/Except license.txt, delete all
In/Editor/filemanager/, except for retaining:
/Connectors/aspx/config. ascx
/Connectors/aspx/upload. aspx, delete all
Delete
/Editor/_ source/
In the checkauthentication () method of/Editor/filemanager/connectors/aspx/config. ascx, the logic for user login verification is added.