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/web Effects" 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
Toolbarcancollaps Tutorial E=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"%>)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
