Web page Editor FCKeditor 2.6.4 Thin Configuration Method _ Web page Editor

Source: Internet
Author: User
Tags browser cache

Upload directory please set in fckeditoreditorfilemanagerconnectorsaspconfig.asp

Dim Configuserfilespath
Configuserfilespath = "/userfiles/"

Chinese Configuration Description:
Because the download down the package contains a lot of in our use, do not use, do not delete the line. Look at a person like the following PHP as an example, the process of slimming

Delete all files and folders that start with "_"
Delete the FCKeditor directory:
Fckeditor.afp
Fckeditor.asp Phpchina
Fckeditor.cfc
Fckeditor.cfm Phpchina
Fckeditor.lasso
fckeditor.pl Phpchina
fckeditor.py
Access.txt
License.txt
Remove language Packs Editorlang languages other than Chinese and English
Delete folders other than the default skin in the skin directory
Files in filemanager/browser/default/connectors/directory except PHP (latest 2.6.4.1 version seems to be under \filemanager\connectors)
Files in filemanager/upload/directory other than PHP
If you don't want emoticons, remove the MSN folders and emoticons under Editorimagessmiley.
All right, streamline, finish.

We usually put the editor in a folder and usually we can understand it as fckeditor or editor

Find the two key files inside fckeditor_php4.php fckeditor_php5.php The code for these two files is not much different, obviously with the PHP version

Open these two files

xml/html Code
function FCKeditor ($instanceName)
{
$this->instancename = $instanceName;
$this->basepath = './editor/'; Location of the file where the default editor resides
$this->width = ' 100% '; Default Editor width
$this->height = ' 350 '; Default Editor High
$this->toolbarset = ' Default '; Default Editor Skin
$this->value = '; Initial value

$this->config = Array ();
}
FCKeditor settings File "Fckconfig.js"


xml/html Code
Fckconfig.customconfigurationspath = '; Custom profile path and name
Fckconfigfckconfig.editorareacss = Fckconfig.basepath + ' css/fck_editorarea.css '; Style sheet file for edit area
Fckconfig.editorareastyles = '; Style sheet style for edit area
Fckconfig.toolbarcombopreviewcss = '; Toolbar Preview CSS
Fckconfig.doctype = ';//Document type
Fckconfig.basehref = '; Base Address of relative links
Fckconfig.fullpage = false; Whether to allow editing of the entire HTML file, or only to edit the content between the body
Fckconfig.startupshowblocks = false;//Decide whether to enable the display module
Fckconfig.debug = false;//whether the debug feature is turned on
Fckconfigfckconfig.skinpath = Fckconfig.basepath + ' skins/default/'; Skin Path
fckconfig.preloadimages=//Pre-loaded pictures
Fckconfigfckconfig.pluginspath = Fckconfig.basepath + ' plugins/'; Plug-in path
Fckconfig.autodetectlanguage = true; Whether to automatically detect languages
Fckconfig.defaultlanguage = ' ZH-CN '; Default language
fckconfig.contentlangdirection = ' ltr '; Default text direction, optional "Ltr/rtl", that is, from left to right or right to left
Fckconfig.processhtmlentities = true; Working with HTML entities
Fckconfig.includelatinentities = true; including Latin
Fckconfig.includegreekentities = true;//Including Greek
Fckconfig.processnumericentities = false;//handling numeric entities
Fckconfig.additionalnumericentities = '; Attached digital Entities
Fckconfig.fillemptyblocks = true; Whether to fill empty blocks
Fckconfig.formatsource = true; Whether to automatically format code when switching to Code view
Fckconfig.formatoutput = true; Whether to automatically format the code when the content is output
Fckconfig.formatindentator = '; When the code is indented in source format to use the character
Fckconfig.startupfocus = false; Whether the focus is on the editor when the page is opened, whether the cursor stays on the FCKeditor
Fckconfig.forcepasteasplaintext = false; Whether to force paste as plain file content
Fckconfig.autodetectpastefromword = true; Whether to automatically detect paste files from Word, only support IE
Fckconfig.showdropdialog = true;//whether to display a drop-down menu
Fckconfig.forcesimpleampersand = false;//whether to convert & symbols to XML entities
fckconfig.tabspaces = 0;//The number of cursor jumps when the TAB key is pressed, and the default value is zero.
Fckconfig.showborders = true;//merge border
Fckconfig.sourcepopup = false;//Eject
Fckconfig.toolbarstartexpanded = true;//Start FCKeditor toolbar default expansion
Fckconfig.toolbarcancollapse = true;//whether to allow the collapse or expansion of toolbars
Fckconfig.ignoreemptyparagraphvalue = true;//whether to ignore empty paragraph values
Fckconfig.floatingpanelszindex = 10000;//Floating panel Index
Fckconfig.htmlencodeoutput = false;//whether HTML-encoded output
Fckconfig.templatereplaceall = true;//Replace All templates
fckconfig.toolbarlocation = ' in ';//toolbar position,
Fckconfig.customconfigurationspath = '; Custom profile path and name
Fckconfigfckconfig.editorareacss = Fckconfig.basepath + ' css/fck_editorarea.css '; Style sheet file for edit area
Fckconfig.basehref = '; Base Address of relative links
Fckconfig.debug = True/false; Whether debugging is turned on, and when Fckdebug.output () is invoked, the contents are output in the debug window
Fckconfigfckconfig.skinpath = Fckconfig.basepath + ' skins/default/'; Set Skin
Fckconfig.autodetectlanguage = True/false; Whether to automatically detect languages
Fckconfig.defaultlanguage = ' ZH-CN '; Set the default language
fckconfig.contentlangdirection = ' LTR/RTR '; Default text direction, ltr left, RTR right
Fckconfig.fillemptyblocks = True/false; Using this feature, you can replace empty block-level elements with empty cells
Fckconfig.formatsource = True/false; Automatically format code when switching to Code view
Fckconfig.formatoutput = True/false; Whether to automatically format the code when the content is output
Fckconfig.formatindentator = ""; To indent the characters used by the code under "source format"
Fckconfig.geckousespan = True/false; Allow span markers to replace b,i,u tags
Fckconfig.startupfocus = True/false; Focus to editor on Open
Fckconfig.forcepasteasplaintext = true/false;//Forced paste as plain text
Fckconfig.forcesimpleampersand = True/false; Do not convert & symbols to XML entities
Fckconfig.tabspaces = 0/1; Whether the tab is valid
Fckconfig.tabspaces = 4; Number of space characters produced by the TAB key
Fckconfig.showborders = True/false; Whether to merge borders
fckconfig.toolbarstartexpanded = True/false; When the page is loaded, does the toolbar expand, and the Point "expand Toolbar" appears
Fckconfig.toolbarcancollapse = True/false; Whether to allow expansion of the collapse toolbar
Fckconfig.toolbarsets = object; Editor toolbar, can be defined by itself, cut, can refer to the existing toolbar
Fckconfig.entermode = ' P '; Direct return in the editor, generated in code, optional p | div | Br
Fckconfig.shiftentermode = ' BR '; shift+ carriage return in the editor, generated in code, optional p | div | Br
Fckconfig.contextmenu = array of strings; Right-click the contents of the menu
Fckconfig.fontcolors = ""; Text Color list
Fckconfig.fontnames = ""; Font list
fckconfig.fontsizes = ""; Font Size list
Fckconfig.fontformats = ""; Text Format list
Fckconfig.stylesxmlpath = ""; The location of the XML file for the CSS style list
Fckconfig.templatesxmlpath = ""; Template's XML file location
Fckconfig.spellchecker = "Iespell/spellerpages"; spelling checker
Fckconfig.iespelldownloadurl = ""; Download the spelling checker URL
Fckconfigfckconfig.smileypath = Fckconfig.basepath + ' images/smiley/msn/'; Expression File Store path
Fckconfig.smileyimages = '; Expression file name list, specific reference default settings
Fckconfig.smileycolumns = 8; The expression window shows the number of expression columns
Fckconfig.smileywindowwidth = 320; The expression window shows the width, and this window adjusts for changes in the expression file.
Fckconfig.smileywindowheight = 240; The expression window shows the height, and this window adjusts for changes in the expression file.
Fckconfig.fullpage = True/false; Whether to allow editing of the entire HTML file, or only to edit the content between the body


Upload Settings

var _filebrowserlanguage = ' php '; ASP | aspx | CFM | Lasso | Perl | php | Py
var _quickuploadlanguage = ' php '; ASP | aspx | CFM | Lasso | Php[/code]
The first is the language used by the file browser, the second fast upload language, and change to what you need
Fckconfig.linkuploadallowedextensions = ""; Empty for all
Fckconfig.linkuploaddeniedextensions = ". (php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi) $ "
This is a list of two file types that allow and reject uploads
Fckconfig.imagebrowser = false; Enable server file browsing functionality in the Insert Picture feature
Fckconfigfckconfig.imagebrowserurl = Fckconfig.basepath + ' filemanager/browser/default/browser.html? type=imageconnector=connectors/' + _filebrowserlanguage + '/connector. ' + _filebrowserextension;
Type=image indicates that the file type is Image This causes the file browser to be positioned under the file Upload path/image/folder
Fckconfig.flashbrowser = false; Enable server file browsing functionality in the Insert Flash feature
Fckconfig.linkupload = false; enable quick upload of insert links
Fckconfig.imageupload = false; enable quick upload of pictures
Fckconfig.flashupload = false; Flash upload feature is enabled


Server File Settings

File Browser settings:
Fckeditoreditorfilemanagerconnectorsaspconfig.asp

Configisenabled = True Determines whether the file browser is enabled. This is done on the server.
Configuserfilespath = "/test/upload/" The path of the uploaded file (relative)
Configallowedextensions.add "File", "" "
Configdeniedextensions.add "File", "php|php2|php3|php4|php5|phtml|pwml|inc|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe| com|dll|vbs|js|reg|cgi "
Configallowedextensions.add "Image", "Jpg|gif|jpeg|png|bmp"
Configdeniedextensions.add "Image", "" "
Configallowedextensions.add "Flash", "Swf|fla"
Configdeniedextensions.add "Flash", "" "
Configallowedextensions.add "Media", "Swf|fla|jpg|gif|jpeg|png|avi|mpg|mpeg|mp (1-4) |wma|wmv|wav|mid|midi|rmi|rm| RAM|RMVB|MOV|QT "
Configdeniedextensions.add "Media", "" "
Here are 4 different filetype types corresponding to the foreground editor insert link Insert picture Insert flash Insert Media 4 features


The file type here is consistent with the two file types mentioned above. Change must be made
Quick upload:

xml/html Code
configisenabled = False//Whether fast upload is enabled
Configuserfilespath = "/userfiles/"

If you want to upload it to the/test/upload/yyymmdd/folder,
Then modify to Configuserfilespath = "/test/upload/" & Year (Now ()) & Right ("0" & Month (now ()), 2) &right ("0" & Day (now ()), 2


FCKeditor to set multiple toolbar styles

FCKeditor has two toolbar styles, Default and base. But now I want to add one more toolbar style. I tried it. Copy the default style settings to fckconfig.toolbarsets["Blogedit", the individual toolbar items I don't write. However, when I call this toolbar, but prompted me to say that the toolbar Blogedit settings did not find, this is how ah? Can fckeditor only use the Def Ault and base two styles? Find fckconfig.js inside settings Here I've added the DDD toolbar style to use when you need only

When quoting $this->toolbarset = ' ddd '; It's OK.


xml/html Code
fckconfig.toolbarsets["Default" = [
[' Source ', ' docprops ', '-', ' Save ', ' newpage ', ' Preview ', '-', ' Templates '],
[' Cut ', ' Copy ', ' Paste ', ' pastetext ', ' Pasteword ', '-', ' Print ', ' spellcheck '],
[' Undo ', ' Redo ', '-', ' find ', ' Replace ', '-', ' selectall ', ' Removeformat '],
[' Form ', ' Checkbox ', ' Radio ', ' TextField ', ' Textarea ', ' Select ', ' Button ', ' ImageButton ', ' HiddenField '],
'/',
[' Bold ', ' italic ', ' underline ', ' strikethrough ', '-', ' subscrīpt ', ' superscrīpt '],
[' Orderedlist ', ' unorderedlist ', '-', ' outdent ', ' Indent ', ' Blockquote '],
[' Justifyleft ', ' justifycenter ', ' justifyright ', ' justifyfull '],
[' Link ', ' Unlink ', ' Anchor '],
[' Image ', ' Flash ', ' Table ', ' rule ', ' smiley ', ' Specialchar ', ' pagebreak '],
'/',
[' Style ', ' Fontformat ', ' fontname ', ' fontsize '],
[' TextColor ', ' bgcolor '],
[' Fitwindow ', ' showblocks ', '-', ' about ']//No comma for the last row.
] ;
fckconfig.toolbarsets["Basic"] = [
[' Bold ', ' Italic ', '-', ' orderedlist ', ' unorderedlist ', '-', ' Link ', ' Unlink ', '-', ' about ']
] ;
fckconfig.toolbarsets["ddd"] = [
[' Orderedlist ', ' unorderedlist ', '-', ' Link ', ' Unlink ', '-', ' about ', ' Bold ', ' italic ', ' underline ', ' Strikethroug
H ', '-', ' subscrīpt ', ' superscrīpt ']
] ;
I'll be there sometime! Adodb+smarty in the application plate written up
Integrate FCKeditor into my page

Since the current version provides fckeditor only for javascrīpt consolidation, here's how to apply javascrīpt to integrate FCKeditor into the site, and of course, the integration of other languages, you can
Refer to the examples in the _samples 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 scrīpt tag in the head section of the page to introduce the JAVASCRĪPT integration module. For example:
<scrīpt type= "text/javascrīpt" src= "/fckeditor/fckeditor.js" ></scrīpt>

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:
<scrīpt type= "Text/javascrīpt" >
var ofckeditor = new FCKeditor (' FCKeditor1 ');
Ofckeditor.create ();
</scrīpt>

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

<scrīpt type= "Text/javascrīpt" >
Window.onload = function ()
{
var ofckeditor = new FCKeditor (' Mytextarea ');
Ofckeditor.replacetextarea ();
}
</scrīpt>
<body>
<textarea id= "Mytextarea" name= "Mytextarea" >this is <b>the</b> initial value.</textarea>
</body>

Now the editor can 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 either edit the master configuration file or you can define a separate profile yourself. The configuration file uses the JAVASCRĪPT syntax.

After you modify it, you can use the following syntax when you create an editor:
Varōfckeditor = new FCKeditor (' FCKeditor1 ');
ofckeditor.config[' customconfigurationspath '] = '/myconfig.js ';
Ofckeditor.create ();

Reminder: When you modify the configuration, empty the browser cache to see the effect

Custom Style list
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
K M D (r-l0 change the spelling checker see detailed descriptions of 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 filename must conform to the RFC 3066 standard, but lowercase is required, for example: portuguess language corresponding script
The filename 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.