Summary
Performance
First of all, FCKeditor's performance is very good, users need very little time to load the fckeditor required files. This is almost a difficult challenge for other online editors because there are too many files to load when you open the editor. Like Cuteeditor, Although the function is stronger than fckeditor, however, it itself is large enough, as for Freetextbox, its ease of use and fckeditor, there is still a gap, it can be said that FCKeditor is a ingenuity of the online editor, It integrates the author's advanced object-oriented JavaScript skills, and combines ease of use with powerful functions.
Full-text
Performance
First of all, FCKeditor's performance is very good, users need very little time to load the fckeditor required files. This is almost a difficult challenge for other online editors because there are too many files to load when you open the editor. Like Cuteeditor, Although the function is stronger than fckeditor, however, it itself is large enough, as for Freetextbox, its ease of use and fckeditor, there is still a gap, it can be said that FCKeditor is a ingenuity of the online editor, It integrates the author's advanced object-oriented JavaScript skills, and combines ease of use with powerful functions.
All images, scripts, and call pages associated with the editor
. language files
. The skin file of the editor
-Tool-like textures, etc.
These will result in considerable traffic between the server and the client. If a lot of files are invoked, then even if each file is small, the user will be impatient to wait.
In version 2.0, there are two ways for developers to solve this problem.
That is, specify the Mount order and script compression
Load order
Starting with version 2.0, the editor loads resources by following these steps:
. Basic page (that is, the editor's page) and the JS script loaded into the editor
. script used to create an editor
. The language and skin of the editor.
. Create an editor.
The contents of the edited document that is loaded into the preset.
. From now on, users can read and edit documents, but dragging support and toolbars are not available
. Load Editor Engine script
. Create a toolbar and use
. From now on, all the features of the editor are complete.
. Load Toolbar icons
Script compression
When you package any new versions, the JS script for the editor will be preprocessed. The preprocessing steps are as follows:
. Remove all code comments
Remove any unused white-space characters.
. Merge the scripts 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 named _source
How to pack?
The editor has its own packaging program, which is located in the root folder of FCKeditor _packager folder, named Fckeditor.Packager.exe, copied to the FCKeditor root folder and run, can automatically package and compress the JS script
It should be noted that the program is a. NET program, you must install the. NET Framework to use
Want to get support?
If you donate 15000 euros, you can get 1 years of free technical support (more expensive, equivalent to 150,000 of the renminbi, but the cost of Western Europe is quite alarming)
How do I install it?
1. Download the latest version of FCKeditor
2. Extract to the folder named FCKeditor in your site root folder (the name must be FCKeditor because the name is already used in the configuration file to indicate the location of the FCKeditor)
3. Now the editor is available, and if you want to view the demo, you can access it in the following ways:
http://<your-site>/fckeditor/_samples/default.html
Note: You can place fckeditor in any folder, by default, putting it into the FCKeditor folder is the easiest way to do it. If you put the folder in a different name, modify the editor BasePath parameters in the configuration folder as follows:
Ofckeditor.basepath= "/components/fckeditor/";
In addition, all folders and files in the FCKeditor folder that begin with an underscore are optional and can be safely removed from your publication. They are not required for editor runtime
How do I integrate fckeditor into my page?
Since the current version provides fckeditor only JavaScript consolidation, here's how to apply JavaScript to consolidate FCKeditor to the site, and of course, the integration of other languages, you can refer to Samples in the sample folder to complete
1, if the editor has been installed in the/fckeditor/folder of your site. So the first step we need to do is put the script tag in the Head section of the page to introduce the JavaScript integration module. For example:
<script type= "Text/javascript" src= "/fckeditor/fckeditor.js" ></script>
Where the path is to be changed
2, now the FCKeditor class is ready to use. There are two ways to create a FCKeditor editor in the page:
Method 1: Inline (recommended): Place the following code where you need to insert the editor in the form tag of the page:
Script type= "Text/javascript" >
var ofckeditor = new FCKeditor (' FCKeditor1 ');
Ofckeditor.create ();
</script>
Method 2:textarea Tag substitution method (not recommended): In the OnLoad event for the page, add the following code to replace an existing textarea tag
<script type= "Text/javascript" >
Window.onload = function ()
{
var ofckeditor = new FCKeditor (' Mytextarea ');
Ofckeditor.replacetextarea ();
}
</script>
<body>
<textarea id= "Mytextarea" name= "Mytextarea" >this is <b>the</b> initial value.</textarea>
</body>
3. The editor can now use the
FCKeditor class Reference:
The following is a description of the FCKeditor class used to create the editor in the page
Builder:
FCKeditor (instancename[, width, height, toolbarset, value])
InstanceName: Unique name of editor (equivalent to ID)
Width: Breadth
Height: Altitude
ToolbarSet: The name of the tool bar collection
Value: Editor initialization content
Property:
InstanceName: Editor Instance Name
Width: The default value is 100%
Height: The default value is 200
ToolbarSet: Tool Set name, reference Fckconfig.js, default is defaults
Value: Initializes the editor's HTML code with an empty default value
BasePath: The base path of the editor, default to/fckeditor/folder, note, try not to use a relative path. It's best to use a presentation relative to the site root path to end
Checkbrowser: Check browser compatibility before displaying the editor, default to True
Displayerrors: Whether to display a prompt error, the default is true;
Collection:
Config[key]=value;
This collection is used to change the value of an item in the configuration, as
ofckeditor.config["DefaultLanguage"]= "PT-BR";
Method:
Create ()
Create and output an editor
Repacetextarea (Textareaname)
Replace the corresponding text box with the editor
How do I configure FCKeditor?
FCKeditor provides a set of settings for customizing its appearance, characteristics, and behavior. The primary configuration file name is Fckconfig.js
You can edit either the master configuration file or the individual profile. The configuration file uses JavaScript syntax.
After you modify it, you can use the following syntax when you create an editor:
var ofckeditor = new FCKeditor (' FCKeditor1 ');
ofckeditor.config[' customconfigurationspath '] = '/myconfig.js ';
Ofckeditor.create ();
Reminder: When you modify the configuration, empty the browser cache to see the effect
Configuration options:
Autodetectlanguage=true/false Automatic Detection language
basehref= "" _fcksavedurl= "" "" "_fcksavedurl=" "" "" relative to the base address of the link
contentlangdirection= "Ltr/rtl" Default text direction
contextmenu= string array, right-click the contents of the menu
Customconfigurationspath= "" Custom profile path and name
Debug=true/false whether debugging is turned on, so that when Fckdebug.output () is invoked, the contents are output in the debug window
Defaultlanguage= "" Default language
editorareacss= the style sheet file in the edit area
When Enablesourcexhtml=true/false is true, HTML is processed as XHTML when switched from a visual interface to a code page
Enablexhtml=true/false whether to allow XHTML to be used instead of HTML
Fillemptyblocks=true/false uses this feature to replace empty block-level elements with empty cells
fontcolors= Set the text color list when the color picker is displayed
Fontformats= the name of the display in a list of text formats
fontnames= the font name in the Font list
fontsizes= a list of font sizes in the font size
Forcepasteasplaintext=true/false forced Paste as plain text
Forcesimpleampersand=true/false whether to convert & symbols to XML entities
Formatindentator= "" When you indent code in source format using characters
Formatoutput=true/false whether the code is automatically formatted when the content is output
Formatsource=true/false automatically format code when switching to Code view
Fullpage=true/false whether to allow editing of the entire HTML file, or only to edit the content between the body
Geckousespan=true/false whether span markers are allowed instead of b,i,u tags
Iespelldownloadurl= "" Download the address of the spelling checker
Imagebrowser=true/false whether to allow browsing of server features
Imagebrowserurl= the URL to run when browsing the server
imagebrowserwindowheight= "" Image browser window height
Imagebrowserwindowwidth= "" Image browser window width
Linkbrowser=true/false whether the server is allowed to browse when the link is inserted
Linkbrowserurl= the URL of the server when inserting a link
linkbrowserwindowheight= "" Link target browser window height
Linkbrowserwindowwidth= "" Link target browser window width
Plugins=object Registration Plugin
Pluginspath= "" Plug-in folder
Showborders=true/false merge borders
Skinpath= "" Skin folder location
smileycolumns=12 Number of Chart window columns
Array of picture filenames in smileyimages= character array
Smileypath= "" "" "" "" "" "
Smileywindowheight Picture Window Height
Smileywindowwidth Picture Window width
Spellchecker= "Iespell/spellerpages" to set the spelling checker
Focus to editor when Startupfocus=true/false Open
Stylesxmlpath= "" Setting the location of the XML file that defines the list of CSS styles
Number of space characters produced by the Tabspaces=4 tab key
Toolbarcancollapse=true/false whether to allow expansion/collapse of toolbars
Toolbarsets=object allow use of toolbar collection
Toolbarstartexpanded=true/false Open is toolbar whether to unfold
Usebroncarriagereturn=true/false whether to generate a BR mark or a P or div tag when carriage return
How do I customize the list of styles?
The FCKeditor style toolbar provides a predefined style that is defined through an XML file, and the default XML style file exists in the Fckstyls.xml file under the FCKeditor root folder
The structure of this XML file is analyzed 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 that is displayed in the Drop-down list, and the element property specifies the object to which this style applies because the style in FCKeditor is context-sensitive, that is, selecting a different object only shows the style defined for such an object
Spell check
FCKEDITOR has two spell-checking tools, one for Iespell, which is used by default, which requires the customer to download and install the Iespell software, and also to provide a spellpager way to check spelling, Since Spellpager is a server-side script written by PHP, it requires your Web server to support PHP scripting language to
How to change the spelling checker see detailed instructions for configuration files
Compressed script
To provide the efficiency of script loading, FCKeditor uses the following methods to compress the script as much as possible to reduce the size of the script:
1, remove the annotations in the script
2. Remove all meaningless whitespace from the script
In addition, FCKeditor provides a tool specifically for compressing scripts so that you can reduce file size when you publish.
You can copy the Fckeditor.Packager.exe from the _packager folder to the FCKeditor root folder to run and compress the script
Localization FCKeditor
If FCKeditor doesn't provide the language you need (in fact, you can create a new language for yourself)
, you just have to copy out the en.js and then translate it on its basis. In addition, the language name and the corresponding script file name must follow the RFC 3066 standard, but lowercase is required, for example: Portuguess language The corresponding script file name must be Pt.js
If you need a language for a particular country, you can add a horizontal line and a national abbreviation after the language abbreviation.
When used, the system automatically detects the client language and the country and applies the appropriate interface languages.
When you create a new language, you must create an entry for it in "Edit/lang/fcklanguagemanager.js", as follows:
Fcklanguagemanager.availablelanguages =
{
En: ' 中文版 ',
PT: ' Portuguese '
}
You need to be reminded that the file must be saved in UTF-8 format
How do I interact with a server-side script?
Please check the example to get the relevant content
In addition, use the following steps in ASP.net
1. Add the FCKeditor to the Toolbox
2. Drag fckeditor control to page
3. Assign a name to it
All of the properties of the 4.FCKEDITOR class can be used not only in code, but also as a property of the FCKEDITOR control, for example, to change the skin, you can specify skinpath= in the UI page/fckeditor/editor/skins/ Office2003 "Can, in fact, fckeditor version of the asp.net can do better, you can find fckeditor asp.net 2.1 source files, and then modify the control design, exposing more useful properties for it, recompile can
5,postback data, using the Value property of the FCKeditor control to obtain
6. Because of the default state, ASP. NET does not allow you to submit content that contains HTML and JavaScript, so you must set the validaterequest of the page using FCKeditor to False. (<% @page validterequest= "false"%>)
--------------------------------------------------------
Report:
First, how to set the upload file language
Put the FCKeditor root directory under the Fckconfig.js file
var _filebrowserlanguage = ' asp '; ASP | aspx | CFM | Lasso | Perl | php | Py
var _quickuploadlanguage = ' asp '; ASP | aspx | CFM | Lasso | Php
In both lines, change to the editor language that you need to invoke, such as aspx with asp.net;
Second, solve the problem of Chinese:
Add in Web.config:
<globalization requestencoding= "GB2312" responseencoding= "GB2312"/>
This setting can display Chinese files, but the URL address is also in Chinese;
If the server to the Chinese address resolution is not good, may cause the picture cannot browse;
So modify: editor\filemanager\browser\default\frmresourceslist.html
The OpenFile function in the
WINDOW.TOP.OPENER.SETURL (FILEURL);
Modified to:
Window.top.opener.SetUrl (Escape (FILEURL));
Three. Set up the uploaded directory:
1: Set in Web.config:
<appSettings>
<add key= "Fckeditor:userfilespath" value= "/fck/upload/"/>
</appSettings>
2: Set in session:
Add the following code to the editor\filemanager\browser\default\connectors\aspx\connector.aspx:
<script runat= "Server" language= "C #" >
protected override void OnInit (EventArgs e)
{
session["Fckeditor:userfilespath"] = "/fck/upload1/";
}
</script>
Attach: How to set up the path of upload picture dynamically in asp.net?
1. Modify the value of Fckconfig.imagebrowserurl in JavaScript as follows:
Fckconfig.imagebrowserurl = "? Path= to upload the file path ";
For example, to upload a file to the UploadFile folder in the root directory of the site, set to:
Fckconfig.imagebrowserurl = "? Path=/uploadfile ";
2. Add the following procedure to the end of the "editor\filemanager\browser\default\connectors\aspx\connector.aspx" document:
<script runat= "Server" language= "C #" >
protected override void OnInit (EventArgs e)
{
if (request.querystring["Path"]==null) {
session["Fckeditor:userfilespath"] = "/uploadfiles/"; Set default values
}else{
session["Fckeditor:userfilespath"] = request.querystring["Path"];
}
}
</script>
