SoFunction
Updated on 2025-04-12

FckEditor Chinese Configuration Manual

【summary】
performance

First of all, FCKEDITOR's performance is very good. Users can load the files required by FCKEDITOR in very little time. For other online editors, this is almost a difficult problem to solve, because too many files need to be loaded when opening the editor. For example, CUTEEDITOR, although the function is more powerful than FCKEDITOR, it is also huge enough. As for FREETEXTBOX, there is still a gap in its ease of use compared to FCKEDITOR. It can be said that FCKEDITOR is a unique online editor. It incorporates the author's profound object-oriented JAVASCRIPT skills, integrating ease of use and powerful functions.
【full text】


performance

First of all, FCKEDITOR's performance is very good. Users can load the files required by FCKEDITOR in very little time. For other online editors, this is almost a difficult problem to solve, because too many files need to be loaded when opening the editor. For example, CUTEEDITOR, although the function is more powerful than FCKEDITOR, it is also huge enough. As for FREETEXTBOX, there is still a gap in its ease of use compared to FCKEDITOR. It can be said that FCKEDITOR is a unique online editor. It incorporates the author's profound object-oriented JAVASCRIPT skills, integrating ease of use and powerful functions.

.All images, scripts and call pages related to the editor
.Language Files
.Editor's skin file
. Tool-like stickers, etc.

These will cause a considerable amount of traffic between the server and the client. If many files are called, even if each file is small, it will make the user impatient to wait.

In version 2.0, developers have two ways to solve this problem.
That is to specify the loading order and script compression

Loading order
Starting from version 2.0, the editor will load the resources as follows:
.Basic page (that is the page where the editor is located) and JS scripts loading the editor
.Scripts used to build editor
.Editor's language and skin.
.Build an editor.
.Load the preset edited document content.
.From now on, users can read and edit documents, but drag and drop support and toolbar are not available
.Load editor engine script
.Create a toolbar and it is available
.From now on, all the functions of the editor are complete
.Load toolbar icon

Script compression

When packaging any new version, the editor's JS script will be preprocessed. The preprocessing steps are as follows:
.Remove all code comments
.Remove all useless whitespace characters.
.Merge the script into several files

Using the above method, we can compress the size of the script file to the original 50%.
After compression, the original code still exists in a folder called _Source

How to package?
The editor already comes with a package program, which is located in the root folder of FCKEDITOR_PACKAGER folder, named, copy it into the root folder of FCKEDITOR and run it, and automatically package and compress the JS scripts.
It should be noted that this program is a .NET program and must be installed.NET FRAMEWORK to be used.

Want to get support?
If you donate 15,000 euros, you can get 1 year of free technical support (it is more expensive, equivalent to RMB 150,000, but the cost in Western Europe is quite amazing)

How to install it?

1. Download the latest version of FCKEDITOR
2. Unzip it into a folder named FCKEDITOR in your site root folder (the name must be FCKEDITOR, because this name has been used in the configuration file to indicate the location of FCKEDITOR)
3. Now, the editor is ready to use. If you want to view the demo, you can access it as follows:
http:// <your-site>/FCKeditor/_samples/

Note: You can place FCKEDITOR in any folder. By default, putting it into the FCKEDITOR folder is the easiest way. If the folder you put is using another name, please modify the editor BasePath parameter in the configuration folder, as shown below:
="/Components/fckeditor/";

In addition, all folders and files starting with underscores in the FCKEDITOR folder are optional and can be safely deleted from your publishing. They are not required when the editor runs.

How to integrate FCKEDITOR into my page?

Since the FCKEDITOR provided in the current version only provides JAVASCRIPT-style integration, we will only talk about how to use JAVASCRIPT to integrate FCKEDITOR into the site. Of course, the integration of various other languages ​​can be completed by referring to the examples in the _samples folder.
1. If the editor is already installed in your site's /FCKEDITOR/ folder, then the first step is to put the SCRIPT tag into the HEAD segment of the page to introduce the JAVASCRIPT integration module. For example:
<script type="text/javascript" src="/fckeditor/"></script>

where the path is mutable

2. Now, the FCKEDITOR class is available. There are two ways to create a FCKEDITOR editor in the page:
Method 1: Inline method (recommended): Put the following code in the FORM mark of the page where you need to insert the editor:
script type="text/javascript">
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
() ;
</script>

Method 2: TEXTAREA tag replacement method (not recommended): In the ONLOAD event of the page, add the following code to replace an existing TEXTAREA tag

<html>
<head>
<script type="text/javascript">
= function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
() ;
}
</script>
</head>
<body>
<textarea name="MyTextarea">This is <b>the</b> initial value.</textarea>
</body>
</html>

3. Now, the editor is ready to use

FCKEDITOR class reference:
The following is an explanation of the FCKEDITOR class used to create an editor on the page

Constructor:
FCKeditor( instanceName[, width, height, toolbarSet, value] )
instanceName: The unique name of the editor (equivalent to ID)
WIDTH: Width
HEIGHT: Height
toolbarSet: Name of toolbar collection
value: Editor initialize content

property:
instanceName: Editor instance name
width: width, default value is 100%
height: height, default value is 200
ToolbarSet: ToolbarSet name, reference, default value is Default
value: Initialize the editor's HTML code, the default value is empty
BasePath: The base path of the editor, default to /Fckeditor/ folder. Note that you should not use relative paths. It is best to use a representation method relative to the root path of the site, and end with /
CheckBrowser: Whether to check browser compatibility before displaying the editor, default is true
DisplayErrors: Whether to display a prompt error, the default is true;

gather:
Config[Key]=value;
This set is used to change the value of an item in the configuration, such as
["DefaultLanguage"]="pt-br";

method:
Create()
Create and output the editor

RepaceTextArea(TextAreaName)
Replace the corresponding text box with an editor

How to configure FCKEDITOR?
FCKEDITOR provides a set of settings for customizing its appearance, features and behavior. The main configuration file name is
You can either edit the main configuration file or define a separate configuration file yourself. The configuration file uses JAVASCRIPT syntax.

After modification, when creating the editor, the following syntax can be used:
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
['CustomConfigurationsPath'] = '/' ;
() ;

Reminder: After you modify the configuration, please clear the browser cache to view the effect

Configuration options:

AutoDetectLanguage=true/false Automatic detection language
BaseHref="" _fcksavedurl="""" _fcksavedurl="""" The base address of the relative link
ContentLangDirection="ltr/rtl" Default text direction
ContextMenu=String array, right-click menu content
CustomConfigurationsPath="" Custom configuration file path and name
Debug=true/false Whether to enable the debugging function, so that when calling(), the content will be output in the debug window
DefaultLanguage="" Default Language
EditorAreaCss="" Stylesheet file in the edit area
When EnableSourceXHTML=true/false is TRUE, when switching from the visual interface to the code page, the HTML is processed into XHTML
EnableXHTML=true/false Whether to allow XHTML to replace HTML
FillEmptyBlocks=true/false Use this function to replace empty block-level elements with spaces.
FontColors="" Sets the text color list when displaying the color picker
FontFormats="" Sets the name displayed in the text format list
FontNames="" Font name in the font list
FontSizes="" List of font sizes in font size
ForcePasteAsPlainText=true/false Force paste as plain text
ForceSimpleAmpersand=true/false Whether to convert the & symbol to XML entity
FormatIndentator="" Characters used when indenting the code in the source code format
FormatOutput=true/false Whether to automatically format the code when outputting content
FormatSource=true/false Whether to automatically format code when switching to code view
FullPage=true/false Whether to allow editing of the entire HTML file, or only editing content between BODYs
GeckoUseSPAN=true/false Whether to allow SPAN tags to replace B, I, U tags
IeSpellDownloadUrl=""Download spellchecker URL
ImageBrowser=true/false Whether to allow browsing server functions
ImageBrowserURL="" The URL that runs when browsing the server
ImageBrowserWindowHeight="" Image BrowserWindowHeight="" Image BrowserWindowHeight
ImageBrowserWindowWidth="" Image Browser Window Width
LinkBrowser=true/false Does it allow browsing the server when the link is inserted
LinkBrowserURL="" The URL of the browsing server when inserting a link
LinkBrowserWindowHeight=""link target browser window height
LinkBrowserWindowWidth=""link target browser window width
Plugins=object Register plugin
PluginsPath="" Plugin folder
ShowBorders=true/false Merge borders
SkinPath="" Skin folder location
SmileyColumns=12 Number of columns in the figure window
SmileyImages=Array of image file names in the character window
SmileyPath="" icon folder path
SmileyWindowHeight Window Height
SmileyWindowWidth symbol window width
SpellChecker="ieSpell/Spellerpages" Set up the spellchecker
StartupFocus=true/false FOCUS to the editor when enabled
StylesXmlPath="" Set the location of the XML file that defines the CSS style list
TabSpaces=4 Number of space characters generated by the TAB key
ToolBarCanCollapse=true/false Whether to allow expansion/collapse toolbar
ToolbarSets=object Allows the use of TOOLBAR collections
ToolbarStartExpanded=true/false Is it true that TOOLBAR is expanded?
UseBROnCarriageReturn=true/false When entering, is it a BR mark or a P or DIV mark?

How to customize the style list?
FCKEDITOR's style toolbar provides predefined styles. The styles are defined through XML files. The default XML style file exists in the file under the FCkEditor root folder.
The structure of this XML file is as follows:
<?xml version="1.0" encoding="utf-8" ?>
<Styles >
<Style name="My Image" element="img">
<Attribute name="style" value="padding: 5px" />
<Attribute name="border" value="2" />
</Style >
<Style name="Italic" element="em" />
<Style name="Title" element="span">
<Attribute name="class" value="Title" />
</Style >
<Style name="Title H3" element="h3" />
</Styles>

Each STYLE tag defines a style. NAME is the style name displayed in the drop-down list. The ELEMENT attribute specifies the object to which this style applies, because the style in FCKEDITOR is context sensitive, that is, selecting different objects will only display the styles defined for this type of object.

Spell check

FCKEDITOR comes with two spell checking tools. One is ieSpell. By default, this method is used. This method of spell checking is required to download and install the small software iespell. In addition, it also provides SpellPager for spell checking. However, since SPELLPAGER is a server-side script written by PHP, your WEB server must support the PHP scripting language before it can be used.
See detailed instructions for the configuration file to change the spell checker

Compress scripts

In order to provide the efficiency of script loading, FCKEDITOR uses the following methods to compress scripts as much as possible to reduce script size:
1. Remove comments from the script
2. Remove all meaningless blanks in the script
In addition, FCKEDITOR also provides a tool specifically for compressing scripts so that you can reduce file size when publishing.
You can copy the _Packager folder to the FCKEDITOR root folder to run and compress the script

Localization FCKEDITOR
If FCKEDITOR does not provide the language you need (actually all of them), you can also make new languages ​​yourself
, you just need to copy it out and then translate it on the basis. In addition, the language name and the corresponding script file name must comply with the RFC 3066 standard, but it needs to be lowercase. For example, the script file name corresponding to the Portuguess Language must be
If you need to target a certain language family in a certain country, you can add horizontal lines and country abbreviations to the language family abbreviation.

When in use, the system will automatically detect the client language system and country and use the appropriate interface language.

When creating a new language, you must create an entry for it in "Edit/lang/", as shown below:
=
{

en : 'English',
pt : 'Portuguese'
}

It should be noted that the file must be saved in UTF-8 format

How to interact with server-side scripts?
Please see the examples to get relevant content

In addition, use the following steps
1. Add FCKEDITOR to the toolbox
2. Pull the FCKEDITOR control to the page
3. Assign a name to it
All attributes of the class can not only be used in the code, but can also be used directly as attributes of the FCKEDITOR control. For example, to change the skin, you can specify SkinPath="/fckeditor/editor/skins/office2003" in the UI page. In fact, the FCKEDITOR version can do better. You can find the source file of FCKEDITOR 2.1, and then modify the design of the control to expose more useful properties to it, and recompile it.
5. The data after POSTBACK is obtained using the value attribute of the FCKEDITOR control.
6. Since by default, submission of content containing HTML and JAVASCRIPT is not allowed, you must set the ValidateRequest of the page using FCKEDITOR to false.(<%@page validteRequest="false" %> to false)


--------------------------------------------------------

Attached:

1. How to set up the upload file language

Put the file below the root directory of FCKeditor

var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php

Change these two lines to the editor language you need to call, if used, change it to aspx;


2. Solve Chinese problems:
Add in:
<globalization requestEncoding="GB2312" responseEncoding="GB2312"/>
After setting this way, you can display Chinese files, but the URL address is also Chinese;
If the server does not resolve the Chinese address well, the image may be unable to be viewed;
So modify: editor\filemanager\browser\default\
The OpenFile function in
( fileUrl ) ;
Modified to:
( escape(fileUrl) ) ;


3. Set up the uploaded directory:
1: Set in:
<appSettings>
<add key="FCKeditor:UserFilesPath" value="/fck/UpLoad/" />
</appSettings>

2: Set in Session:
Add the following code to editor\filemanager\browser\default\connectors\aspx\:
<script runat="server" language="C#">
protected override void OnInit(EventArgs e)
{
Session["FCKeditor:UserFilesPath"] = "/fck/UpLoad1/";
}
</script>

Appendix: How to dynamically set the path to upload images in?

1. The modified value in javascript is as follows:
+= "?Path=file path to upload";
For example: To upload the file to the UploadFile folder in the root directory of the site, set it to:
+= "?Path=/UploadFile";
2. Add the following program to the "editor\filemanager\browser\default\connectors\aspx\" file at the end:
<script runat="server" language="C#">
protected override void OnInit(EventArgs e)
{
if( ["Path"]==null ){
Session["FCKeditor:UserFilesPath"] = "/UpLoadFiles/"; //Set the default value
}else{
Session["FCKeditor:UserFilesPath"] = ["Path"];
}
}
</script>