For example, Cuteeditor, although the function is stronger than fckeditor, but, it itself is large enough, as for Freetextbox, its ease of use and fckeditor, there is still a gap, you can say, 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.
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= "" "" "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>
How do I dynamically set the path of an uploaded picture 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>
--------------------------------------------------------------------------------
Configuration and usage techniques in multiple environments
--------------------------------------------------------------------------------
Add a right-click menu in FCKeditor
Now on the Internet to introduce how FCKeditor configuration, how to streamline the example is very much, if necessary can Google, there is no need to repeat. Now, how to customize this editor, including how to add item on the toolbar, generate a response, add a right-click menu. IT seems VERY easy!
Gossip is less, and books are the same.
A, custom right-click menu:
1. First, add the name of the tool item you want to add in the Editor/lang/zh-cn.js, this file defines a Fcklang variable, as in the inside of the format, such as: First: "Number one", note that if it is not in the penultimate line (the first line is "}" ), the comma behind it must be, otherwise, the Web page will not appear editor, I have made such a low-level error, to wake up, find a secluded big mouth son hello; Oh, we are Chinese, naturally in the colon after the corresponding Chinese, which is also the future of the content displayed in the Web page.
2. After that, create a new command:case ' one in editor/_source/internals/fckcommands.js ': Ocommand = new Fckfirstcommand (' I ', Fcklang.first); Break attention to the fckfirstcommand of the red font? This is a custom command, which will be discussed later.
3, then, add a context menu in Editor/_source/internals/fckcontextmenu.js. In case ' Generic ': Add the following: Ogroup.add (this, ' a ', Fcklang.first, true); The argument for the fourth Boolean type, if specified as true, indicates that the menu has an icon, whereas none. In this, I indicated that my custom menu has the icon, then I should put the icon in the Editor\skins\xxx\toolbar directory, in which XXX is you in your configuration file chooses editor's skin, but our icon naming is the knowledge, must is the lowercase letter of the second string argument, such as the Fckcontextmenuitem constructor (and so called it), where my icon is named First.gif. Ok, so the right-click menu is added, run your Web page and see if FCKeditor is working? If it doesn't work, you'll have to refer back to this article ^_^.
4, and then, there is the most critical step: the content of the Fckeditor.original.html Web page under the editor instead of fckeditor.html content, and do not forget to back up fckeditor.html files!
5, now start to discuss the Fckfirstcommand in step 2. Add the menu add it, you have to let ya have what function? Well, create this class in Editor/_source/commandclasses/fck_othercommands.js:
Four FCKeditor practical application skills
Generally after the establishment of a good class, but also to establish two static functions: XXX. prototype. Execute,xxx. prototype. GetState. The former is the event handler function, that is, click on the right menu to perform the function of all written in this function, which returns the status of the menu (available?). To illustrate this, we implement one of the simplest functions: FCKPageCommand.prototype.Execute = function () {Window.alert ("It works!");} It's simple enough, it's just not painful. Pop-up a prompt box. Of course, here we can also use the FCKeditor defined command, such as Fckdialogcommand, without a custom fckfirstcommand, which is also defined in Fck_ Othercommands.js, of course, if so, the pop-up will be a dialog. Run the Web page again, right-click, click on your custom menu, do you want to pop the cue box?
FCKeditor has been to the 2.3.1 version, for the domestic web developers, but also basically have "try know how much", many people put it into their own projects, there are many large Web sites from which to eat the sweetness. Today, I will briefly introduce myself in the use of FCKeditor process summed up some of the skills, of course, these are actually FCK, but a lot of people use FCK time did not find it:P
1, timely open editor
Many times, we don't need to open the editor directly when we open the page, but when we use it, we have a good user experience, on the other hand, we can eliminate the effect of FCK on the page opening speed when loading, as shown in the figure
Click the "Open Editor" button to open the editor interface
How it works: using the JavaScript version of FCK, when the page loads (not open FCK), create a hidden textarea field, the textarea name and ID to match the FCK instance names created, and then click the "Open Editor" button, By calling a function, you use the FCK Replacetextarea () method to create the FCKeditor, the following code
<script type= "Text/javascript" >
<!--
function Showfck () {
var ofckeditor = new FCKeditor (' fbcontent ');
Ofckeditor.basepath = '/fckeditor/';
Ofckeditor.toolbarset = ' Basic ';
Ofckeditor.width = ' 100% ';
Ofckeditor.height = ' 200 ';
Ofckeditor.replacetextarea ();
}
-->
</script>
<textarea name= "fbcontent" id= "Fbcontent" ><textarea>
2, using the FCKeditor API
FCKeditor Editor, provides a very rich API, used to give end user to implement a lot of functions to customize, such as the most basic data validation, how to submit in the current editor with JS to determine whether there is content, FCK API provides the GetLength () method;
Then, for example, how to insert content into FCK via script, use inserthtml (), etc.
Also, in the case of user-defined functionality, intermediate steps may perform some inline operations on FCK, then use the ExecuteCommand () method.
For a detailed list of APIs, check out the FCKeditor wiki. For common APIs, check out the _samples/html/sample08.html in the FCK compression pack. No code is attached here.
3, the external edit bar (multiple editing fields share an edit bar)
This feature is not available until the 2.3 version, the previous version of the FCKeditor to use multiple editors in the same page, you have to create, now with this outreach function, there is no need to be so troublesome, just put the bar in a suitable position, the following can be unlimited to create the editing domain, as shown:
To do this, you need to first define a container for a toolbar in the page: <divid= "Xtoolbar" ></div>, and then set it according to the id attribute of the container.
ASP implementation code: <div id= "Fcktoolbar" ></div>
<%
Dim Ofckeditor
Set ofckeditor = New FCKeditor
With Ofckeditor
. BasePath = Fckpath
. Config ("toolbarlocation") = "Out:fcktoolbar"
. ToolbarSet = "Basic"
. Width = "100%"
. Height = "200"
. Value = ""
. Create "Jcontent"
. Height = "150"
. Value = ""
. Create "Jreach"
End With
%>
JavaScript implementation code: <DIV id= "Xtoolbar" ></div>
FCKeditor 1:
<script type= "Text/javascript" >
<!--
Automatically calculates the editor base path based on the _samples directory.
This is usefull a for these samples. A Real application should use something like this:
Ofckeditor.basepath = '/fckeditor/'; '/fckeditor/' is the default value.
var Sbasepath = document.location.pathname.substring (0,document.location.pathname.lastindexof (' _samples '));
var ofckeditor = new FCKeditor (' fckeditor_1 ');
Ofckeditor.basepath = Sbasepath;
Ofckeditor.height = 100;
ofckeditor.config[' toolbarlocation '] = ' out:parent (xtoolbar) ';
Ofckeditor.value = ' This is some <strong>sample text</strong>. You are using FCKeditor. ';
Ofckeditor.create ();
-->
</script>
<br/>
FCKeditor 2:
<script type= "Text/javascript" >
<!--
Ofckeditor = new FCKeditor (' fckeditor_2 ');
Ofckeditor.basepath = Sbasepath;
Ofckeditor.height = 100;
ofckeditor.config[' toolbarlocation '] = ' out:parent (xtoolbar) ';
Ofckeditor.value = ' This is some <strong>sample text</strong>. You are using FCKeditor. ';
Ofckeditor.create ();
-->
</script>
This section of the detailed demo please refer to:
_samples/html/sample11.html
_samples/html/sample11_frame.html
4, file management functions, file upload permissions issues
The security of FCKeditor's file Management Section has been a noteworthy one, but a lot of people have missed it, although one of the features that FCKeditor has been in release versions is filtering the upload file type, but she has not considered another question: who is allowed to upload? Who can browse Server files?
Before beginning to use FCKeditor, I have appeared this problem, fortunately Netrube (FCKeditor culture and FCKeditor ASP version of the upload program author) in time to remind me, the practice is to modify the FCK upload program, in which the right to judge, And then in the fckconfig.js to remove some of the corresponding functions. But with the FCK version of the continuous upgrade, every liter to go to change the configuration program fckconfig.js, I found that tired, there is no way to better control this configuration? In fact, there is.
In Fckconfig.js, there are settings on whether to turn on uploading and browsing servers, and when creating FCKeditor, the program is used to determine whether or not to create an editor with upload browsing capabilities. First, I set all the upload and browse settings to False in Fckconfig.js, and then I used the following code:
ASP version: <%
Dim Ofckeditor
Set ofckeditor = New FCKeditor
With Ofckeditor
. BasePath = Fckpath
. Config ("toolbarlocation") = "Out:fcktoolbar"
If Request.Cookies (SITE_SN) ("issuper") = "yes" then
. Config ("linkbrowser") = "true"
. Config ("imagebrowser") = "true"
. Config ("flashbrowser") = "true"
. Config ("linkupload") = "true"
. Config ("imageupload") = "true"
. Config ("flashupload") = "true"
End If
. ToolbarSet = "Basic"
. Width = "100%"
. Height = "200"
. Value = ""
. Create "Jcontent"
%>
JavaScript version: var ofckeditor = new FCKeditor (' fbcontent ');
<%if Power = Powercode then%>
ofckeditor.config[' linkbrowser '] = true;
ofckeditor.config[' imagebrowser '] = true;
ofckeditor.config[' flashbrowser '] = true;
ofckeditor.config[' linkupload '] = true;
ofckeditor.config[' imageupload '] = true;
ofckeditor.config[' flashupload '] = true;
<%end if%>
Ofckeditor.toolbarset = ' Basic ';
Ofckeditor.width = ' 100% ';
Ofckeditor.height = ' 200 ';
Ofckeditor.value = ';
Ofckeditor.create ();
FCKPageCommand.prototype.Execute = function ()
{
Window.alert ("It works!");
}
FCKeditor is configured to use in ASP environments
Let's talk about my test environment: xpsp2,iis5.1,fckeditor2.0
To create a new site on IIS, I'll just name it fckeditor.
Create a corresponding site in DW, test server is native, support VBScript
Download FCKeditor2.0, this thing is open source, the Internet can down to a lot of places to find their own ...
Download should be compressed package, extract to the FCKeditor site root directory, nothing need to change, directly can begin to call. When you do, you'll find it easy to die!
In the site root, create a new index.asp page,<body> paragraph with the following code (invoke editor):
<%
Dim Ofckeditor
Set ofckeditor = New FCKeditor
Ofckeditor.basepath = "/fckeditor/"//Set editor path, a directory under the root directory of my Site
Ofckeditor.toolbarset = "Default"
Ofckeditor.width = "100%"
Ofckeditor.height = "600"
Ofckeditor.value = ""//This is the initial value to the editor
Ofckeditor.create "Logbody"//after the contents of the editor are made by this logbody, named by you
%>
Don't forget to add the second line in front of the index.asp.
<!--#include file= "fckeditor/fckeditor.asp"-->
Include the fckeditor.asp in. Remember, remember!
It's that simple!
Now all you have to do is use this editor as a control to extract its data: request ("Logbody")
Now, breathe. The test worked.
