Web Editor FCKeditor 2.6.4 simplified configuration method

Source: Internet
Author: User

Set the upload directory in fckeditoreditorfilemanagerconnectorsaspconfig. asp.

Dim ConfigUserFilesPath
ConfigUserFilesPath = "/userfiles /"

Chinese configuration instructions:
This is because the downloaded package contains many files that we cannot use when using them. You can do this without deleting them. Let's look at my personal preferences. The following uses PHP as an example to program slimming.

Delete all files and folders starting "_"
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
Delete languages other than Chinese and English in the Language Pack editorlang
Delete a folder except the default skin in the skin directory
Filemanager/browser/default/connectors/Files other than php in the directory (the latest 2.6.4.1 version seems to be under \ filemanager \ connectors)
Files other than php in the filemanager/upload/directory
If you do not want to delete the msn folder and emoticons under editorimagessmiley
All done. simplified.

We usually store the editor in a folder. Normally we can understand it as fckeditor or editor.

Find the two key files fckeditor_php4.php fckeditor_php5.php. The codes of these two files are not much different. It is obviously related to the php version.

Open these two files

XML/HTML code
Function FCKeditor ($ instanceName)
{
$ This-> InstanceName = $ instanceName;
$ This-> BasePath = './editor/'; default file location of the editor
$ This-> Width = '000000'; default editor Width
$ This-> Height = '000000'; default editor Height
$ This-> ToolbarSet = 'default'; Default editor SKIN
$ This-> Value = ''; Initial Value

$ This-> Config = array ();
}
FCKeditor setting file "fckconfig. js"

XML/HTML code
FCKConfig. CustomConfigurationsPath = ''; // custom configuration file path and name
FCKConfigFCKConfig. EditorAreaCSS = FCKConfig. BasePath + 'css/fck_editorarea.css '; // The style table file in the editing area
FCKConfig. EditorAreaStyles = ''; // the style of the style sheet in the editing area.
FCKConfig. ToolbarComboPreviewCSS = ''; // preview CSS in the toolbar.
FCKConfig. DocType = ''; // Document Type
FCKConfig. BaseHref = ''; // The base address of the Relative Link
FCKConfig. FullPage = false; // whether to allow editing of the entire HTML file or only the content between the bodies
FCKConfig. StartupShowBlocks = false; // determines whether to enable the "display module"
FCKConfig. Debug = false; // whether debugging is enabled
FCKConfigFCKConfig. SkinPath = FCKConfig. BasePath + 'Skins/default/'; // skin path
FCKConfig. PreloadImages =... // pre-installed Image
FCKConfigFCKConfig. PluginsPath = FCKConfig. BasePath + 'ins INS/'; // Plug-In Path
FCKConfig. AutoDetectLanguage = true; // whether to automatically detect the language
FCKConfig. DefaultLanguage = 'zh-cn'; // default language
FCKConfig. ContentLangDirection = 'ltr'; // default text direction. Optional, "ltr/rtl", that is, left-to-right or right-to-left
FCKConfig. ProcessHTMLEntities = true; // process HTML Objects
FCKConfig. IncludeLatinEntities = true; // including Latin
FCKConfig. IncludeGreekEntities = true; // includes Greek
FCKConfig. ProcessNumericEntities = false; // process numeric entities
FCKConfig. AdditionalNumericEntities = ''; // additional numeric entity
FCKConfig. FillEmptyBlocks = true; // whether to fill an empty Block
FCKConfig. FormatSource = true; // whether to automatically format the code when switching to the Code view
FCKConfig. FormatOutput = true; // whether to automatically format the code when outputting the content
FCKConfig. FormatIndentator = ''; // The characters used to indent the code in the source code format
FCKConfig. StartupFocus = false; // whether the focus is in the editor when it is enabled, that is, whether the time mark on the page is stuck on fckeditor
FCKConfig. ForcePasteAsPlainText = false; // whether to forcibly paste the File Content
FCKConfig. AutoDetectPasteFromWord = true; // whether to automatically detect file pasting from word. Only Internet Explorer is supported.
FCKConfig. ShowDropDialog = true; // whether the drop-down menu is displayed
FCKConfig. ForceSimpleAmpersand = false; // do not convert & into XML entities
FCKConfig. TabSpaces = 0; // press the Tab key. The default value is zero.
FCKConfig. ShowBorders = true; // merge borders
FCKConfig. SourcePopup = false; // pop-up
FCKConfig. ToolbarStartExpanded = true; // start the fckeditor toolbar to show whether to expand by default.
FCKConfig. ToolbarCanCollapse = true; // whether to collapse or expand the toolbar
FCKConfig. IgnoreEmptyParagraphValue = true; // whether to ignore empty paragraph values
FCKConfig. FloatingPanelsZIndex = 10000; // floating panel Index
FCKConfig. HtmlEncodeOutput = false; // whether to output HTML Encoding
FCKConfig. TemplateReplaceAll = true; // whether to replace all templates
FCKConfig. ToolbarLocation = 'in'; // toolbar location,
FCKConfig. CustomConfigurationsPath = ''; // custom configuration file path and name
FCKConfigFCKConfig. EditorAreaCSS = FCKConfig. BasePath + 'css/fck_editorarea.css '; // The style table file in the editing area
FCKConfig. BaseHref = ''; // The base address of the Relative Link
FCKConfig. Debug = true/false; // whether to enable the debugging function. When you call FCKDebug. Output (), the content is Output in the debugging window.
FCKConfigFCKConfig. SkinPath = FCKConfig. BasePath + 'Skins/default/'; // set skin
FCKConfig. AutoDetectLanguage = true/false; // whether to automatically detect the language
FCKConfig. DefaultLanguage = 'zh-cn'; // set the default language
FCKConfig. ContentLangDirection = 'ltr/rtr'; // default text direction, left for ltr, right for rtr
FCKConfig. FillEmptyBlocks = true/false; // this function can be used to replace empty block-level elements with spaces.
FCKConfig. FormatSource = true/false; // whether to automatically format the code when switching to the Code view
FCKConfig. FormatOutput = true/false; // whether the code is automatically formatted when the content is output
FCKConfig. FormatIndentator = ""; // The characters used to indent the code in "Source code format"
FCKConfig. GeckoUseSPAN = true/false; // whether to allow the SPAN flag to replace the B, I, U flag
FCKConfig. StartupFocus = true/false; // whether to FOCUS to the editor when enabled
FCKConfig. ForcePasteAsPlainText = true/false; // force the paste to plain text
FCKConfig. ForceSimpleAmpersand = true/false; // do not convert & into XML entities
FCKConfig. TabSpaces = 0/1; // whether the TAB is valid
FCKConfig. TabSpaces = 4; // number of spaces generated by the TAB key
FCKConfig. ShowBorders = true/false; // whether to merge borders
FCKConfig. ToolbarStartExpanded = true/false; // whether to expand the toolbar when loading the page. It appears only when you click "Expand toolbar ".
FCKConfig. ToolBarCanCollapse = true/false; // whether to show and collapse the toolbar
FCKConfig. ToolbarSets = object; // The toolbar of the editor, which can be customized and deleted. For details, refer to the existing toolbar.
FCKConfig. EnterMode = 'P'; // press enter in the editor to generate the file in the Code. Optional values: p | div | br
FCKConfig. ShiftEnterMode = 'br '; // Shift + press enter in the editor, which is generated in the Code. Optional values: p | div | br
FCKConfig. ContextMenu = string array; // context menu content
FCKConfig. FontColors = ""; // text color list
FCKConfig. FontNames = ""; // font list
FCKConfig. FontSizes = ""; // font size list
FCKConfig. FontFormats = ""; // text format list
FCKConfig. StylesXmlPath = ""; // location of the XML file in the CSS style list
FCKConfig. TemplatesXmlPath = ""; // XML file location of the template
FCKConfig. SpellChecker = "ieSpell/Spellerpages"; // spell checker
FCKConfig. IeSpellDownloadUrl = ""; // download the spelling checker URL
FCKConfigFCKConfig. SmileyPath = FCKConfig. BasePath + 'images/smiley/msn/'; // storage path of the emoticon File
FCKConfig. SmileyImages = ''; // list of emoticon file names. For details, refer to the default settings.
FCKConfig. SmileyColumns = 8; // Number of columns displayed in the emoticons window
FCKConfig. smiley1_wwidth = 320; // display width of the emoticon window. This window will be adjusted due to changes in the emoticon file.
FCKConfig. smiley1_wheight = 240; // The height of the emoticons window. This window will be adjusted due to changes in the emoticons file.
FCKConfig. FullPage = true/false; // whether to allow editing of the entire HTML file or only the content between the bodies

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, and the second is the language used for fast upload.
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 upload.
FCKConfig. ImageBrowser = false; Whether to enable the Server File browsing function in the image inserting Function
FCKConfigFCKConfig. ImageBrowserURL = FCKConfig. BasePath + 'filemanager/browser/default/browser.html? Type = ImageConnector = connectors/'+ _ FileBrowserLanguage +'/connector. '+ _ FileBrowserExtension;
Type = Image indicates that the file Type is image, which causes the file browser to locate the File Upload path/image/folder.
FCKConfig. FlashBrowser = false; Whether to enable Server File browsing in the flash insertion function
FCKConfig. LinkUpload = false; Whether to enable the quick upload function of the inserted Link
FCKConfig. ImageUpload = false; Whether to enable the image quick upload function
FCKConfig. FlashUpload = false; Whether to enable the flash upload function

Server File Settings

File browser settings:
Fckeditoreditorfilemanagerconnectorsaspconfig. asp

ConfigIsEnabled = true determines whether to enable the file browser. This is executed on the server.
ConfigUserFilesPath = "/test/upload/" File upload path (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 ",""
Four different filetypes correspond to the insert link of the front-end Editor, insert an image, insert flash, and insert media.

The file type here is the same as the two file types mentioned above.
Quick upload:

XML/HTML code
ConfigIsEnabled = False // whether to enable quick upload
ConfigUserFilesPath = "/UserFiles /"

// If You Want to upload the file to the/test/upload/yyymmdd/folder
Change to ConfigUserFilesPath = "/test/upload/" & year (now () & right ("0" & month (now (), 2) & right ("0" & day (now (), 2)

FCKeditor sets multiple toolbar styles

FCKeditor comes with two toolbar styles, Default and Base. But now I want to add a toolbar style. I tried it. Copy the settings of the Default style to FCKConfig. ToolbarSets ["Blogedit"]. I will not write the individual toolbar items in it. However, when I call this toolbar, I am prompted that the toolbar Blogedit settings are not found. What is the problem? Can FCKeditor only use the Def ault and Base styles? Find the fckconfig. js file and set it here. When I add the ddd toolbar style, I only need

When referencing $ this-> ToolbarSet = 'ddd '; then 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', 'textta', 'select', 'click', 'imagebutton ', 'hiddenfield'],
'/',
['Bold ', 'italic', 'underline', 'strikethangout', '-', 'subscr limit pt', 'superscr limit pt'],
['Orderedlist', 'unorderedlist', '-', 'outdent ', 'indent', 'blockquote'],
['Justifyleft', 'justifycenter', 'justifyright', 'justifyfull'],
['Link', 'unlink', 'anchor '],
['Image', 'flash', 'table', 'rule', 'smilil', 'specialchar ', 'pagebreak'],
'/',
['Style', 'fontformat', 'fontname', 'fontsize'],
['Textcolor', 'bgcolor'],
['Fitwindow', 'showbuckets', '-', '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 limit pt', 'superscr limit pt']
];
I have time! Write the Application Section in ADODB + SMARTY
Integrate FCKEDITOR into my page

The FCKEDITOR provided in the current version only provides JAVAscr ī pt integration. Therefore, Here we only describe how to apply JAVAscr ī pt to integrate FCKEDITOR into the site. Of course, you can integrate other languages
Refer to the example 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 to add the scr platinum pt mark in the HEAD segment of the page to introduce the JAVAscr platinum pt integration module. for example:
<Scr limit pt type = "text/javascr limit pt" src = "/fckeditor. js"> </scr limit pt>

The path is changeable.

2. Now, the FCKEDITOR class can be used. There are two ways to create a FCKEDITOR editor on the page:
Method 1: inline (recommended): Insert the following code to the place where the editor needs to be inserted in the FORM tag of the page:
<Scr limit pt type = "text/merge Cr limit pt">
Var oFCKeditor = new FCKeditor ('fckeditor1 ');
OFCKeditor. Create ();
</Scr platinum pt>

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

<Html>
<Head>
<Scr limit pt type = "text/merge Cr limit pt">
Window. onload = function ()
{
Var oFCKeditor = new FCKeditor ('mytextarea ');
OFCKeditor. ReplaceTextarea ();
}
</Scr platinum pt>
</Head>
<Body>
<Textarea id = "MyTextarea" name = "MyTextarea"> This is <B> the </B> initial value. </textarea>
</Body>
</Html>

Now the editor can be used.

FCKEDITOR class reference:
The following describes the FCKEDITOR class used to create an editor on the page.

Constructor:
FCKeditor (instanceName [, width, height, toolbarSet, value])
InstanceName: Unique name of the Editor (equivalent to ID)
WIDTH: WIDTH
HEIGHT: HEIGHT
ToolbarSet: name of the toolbar set
Value: the initialization content of the editor.

Attribute:
InstanceName: Editor Instance name
Width: width. The default value is 100%.
Height: height. The default value is 200.
ToolbarSet: tool set name. For details, refer to FCKCONFIG. JS. The Default value is Default.
Value: Initialize the HTML code of the editor. The default value is null.
BasePath: The base path of the editor. The default path is/Fckeditor/folder. Be sure not to use the relative path. It is best to use the Representation Method Relative to the root path of the site and end /.
CheckBrowser: whether to check the browser compatibility before the editor is displayed. The default value is true.
DisplayErrors: Indicates whether an error is displayed. The default value is true;
Set:
Config [Key] = value;
This set is used to change the value of a configuration item, as shown in figure
OFckeditor. Config ["DefaultLanguage"] = "pt-br ";

Method:
Create ()
Create and output an editor

RepaceTextArea (TextAreaName)
Replace the text box with the editor

How to configure FCKEDITOR?
FCKEDITOR provides a set of settings for customizing its appearance, characteristics, and behavior. The main configuration file name is Fckconfig. js.
You can either edit the master configuration file or define a separate configuration file. The configuration file uses the JAVAscr into pt syntax.

After modification, you can use the following syntax when creating an Editor:
Var export FCKeditor = new FCKeditor ('fckeditor1 ');
OFCKeditor. Config ['customconfigurationspath'] = '/myconfig. js ';
OFCKeditor. Create ();

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

Custom style list
The FCKEDITOR style toolbar provides predefined styles defined by the XML file. The default XML style file exists in the FckStyls. xml file in the FCkEditor root folder.
The structure of the 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 displayed in the drop-down list. The ELEMENT attribute specifies the objects applicable to this STYLE, because the STYLE in FCKEDITOR is context sensitive, that is, select different objects. Only the styles defined for these objects are displayed.

Spelling check

FCKEDITOR comes with two spell checking tools, ieSpell, which is used by default. This method requires the customer to download and install the small software iespell. In addition, spellPager is also provided for spelling checks. However, since SPELLPAGER is a server-side script compiled by PHP, your WEB server must support the PHP scripting language.
K m d (for how the R-l0 changes the spell checker, see detailed instructions on configuration files

Compression script

To improve the efficiency of Script Loading, FCKEDITOR uses the following methods to compress the script as much as possible to reduce the script size:
1. Remove the comments from the script.
2. Remove the meaningless blank in the script.
In addition, FCKEDITOR provides a tool specifically used to compress scripts so that you can reduce the file size during release,
You can copy fckeditor.packager.exe in the _packagerfolder to the fckeditor root folder to run and compress the script.

Localized FCKEDITOR
If FCKEDITOR does not provide all the languages you need (actually all of them are available), you can create a new language by yourself.
, You only need to copy the EN. JS. in addition, the Language name and the corresponding script file name must follow the RFC 3066 standard, but must be in lower case, for example, the script corresponding to Portuguess Language
The file name must be pt. js.
If you want to target a certain country, you can add a horizontal line and a country abbreviation after the abbreviation.
During use, the system automatically detects the client language and country and uses the appropriate interface language.
After creating a new language, you must create an entry for it in "Edit/lang/fcklanguagemanager. js", as shown below:
Fck1_agemanager. AvailableLanguages =
{

En: 'English ',
Pt: 'portranges'
}

Note 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.