Explore the configuration of FCKeditor in PHP _php tutorial

Source: Internet
Author: User
Objective:
Fckeidtor is a foreign multi-language editor, you can make simple changes to its configuration file to support the current common web development language applications, the following I would like to talk about the latest version of FCKeditor 2.4.2 in the specific configuration of PHP, there are deficiencies and errors in place, welcome correction.

Streamline:
Because this editor is multi-lingual, we first use the corresponding redundant file to delete it.

1, temporary files and folders Delete: Starting from the root directory to delete all files and folders beginning with "_", because they are temporary files and folders. After deleting this kind of temporary files and folders, we also want to delete the redundant files under the root directory, we only keep fckconfig.js (config file), fckeditor.js (JS mode call file), Fckeditor.php (PHP method calls the file, the new version through the file unified call PHP4 or PHP5 call file, Fckeditor_php4.php/fckeditor_ Php5.php you can cut it according to your server usage, fckeditor_php4.php (php4 call file), fckeditor_php5.php (php5 call file), Fckstyles.xml (style) , the Fcktemplates.xml (template) file, and the editor folder.
2, Editor/lang directory: Storage is multilingual configuration file, because we can only use en and zh-cn (Simplified Chinese) So, according to my choice, I deleted the other language configuration file.
3, Editor/skins interface directory: The default with three interface (default: interface, loading speed relatively fast; Office2003: Compared to the PP interface, but the speed is really slower; Silver: white interface, loading speed is relatively fast), You can decide whether or not to delete one or two of them at your discretion.
4. Editor/filemanager/browser/default/connectors directory: The Web Dynamic language supported by the editor, we take PHP as an example so keep the PHP directory, test.html file can help you to see the upload settings in a language (specific upload settings I will be in the following configuration for more detailed explanation), you can decide whether to delete.
5, Editor/filemanager/upload directory: the same.
By this streamlining, you will find that the whole editor is really "slimming" a lot, hehe

Basic Configuration:
I'm going to start with a simple configuration of the editor (not every step is required, and can be modified according to your needs):
1. Default language
Open the Fckconfig.js file (note that this file is Utf-8 encoded OH), find fckconfig.autodetectlanguage = true; (line 56th) This sentence functions as the automatic detection language, the default is true, That is, the editor will automatically load the appropriate language according to the system language, we will change it to false, do not let it detect, and then fckconfig.defaultlanguage = ' en ', (editor default language, line 57th) to the Simplified Chinese "zh-cn".
2. Font list
Still open fckconfig.js, because this editor is written for foreigners, so the default does not provide Chinese font, we join for it, find Fckconfig.fontnames (line 142th) to add "song body, italics _gb2312; new song body; bold, script; Other fonts can be added on their own.
3. File Upload
FCKeditor file Management program in the editor/filemanager/folder, divided into browse (browser) and upload (upload) two kinds. "Browse" means to browse the server already exists file and can choose, can also upload local files to the server, upload refers to the fast upload, in the window click "Upload" option, select a local file upload on the line, but can not see the server has uploaded files, relatively inconvenient, but the operation is faster. That is, there is a file browsing in the FCKeditor, there are two files uploaded, and these settings are scattered in multiple files, configuration is relatively complex, I would roughly say:
In FCKeditor, there are three files related to the upload function, one is the JS file, two PHP files, the former is closed after the interface does not appear in the relevant window or button, the latter closed after the relevant functions are not available.
JS file refers to the Fckconfig.js file, in the previous version of the Fckconfig.js in the first you must open the following items:
Browse Upload features:

Fckconfig.linkbrowser = true; File
Fckconfig.imagebrowser = true; Image
Fckconfig.flashbrowser = true; Flash

Quick Upload feature:

Fckconfig.linkupload = true; Ditto
Fckconfig.imageupload = true; Ditto
Fckconfig.flashupload = true; Ditto

Set these items to true, And we are using the 2.4.2 Fckconfig.js in the default is already turned on the upload switch display function, so, if you want to use the editor as a foreground (FCKeditor upload vulnerability problem has not been improved), considering the security you may need to turn off the file upload function, then you just need to put these several Set to False (of course two PHP files you do not have to open the upload function OH).
If you want to use the File upload feature, then we continue to configure:
Still in the Fckconfig.js file, FCKeditor support for the language by default is ASP, find the following two sentences, make corresponding changes:

var _filebrowserlanguage = ' asp '; ASP | aspx | CFM | Lasso | Perl | php | PY (line 182th)
var _quickuploadlanguage = ' asp '; ASP | aspx | CFM | Lasso | PHP (line 183th)

We will change it to ' php ':

var _filebrowserlanguage = ' php '; ASP | aspx | CFM | Lasso | Perl | php | PY (line 182th)
var _quickuploadlanguage = ' php '; ASP | aspx | CFM | Lasso | Php

In version 2.4.2, we found that support for more file suffix names was added, which should be a minor change to the upload vulnerability, but not very useful.
*. Allowedextensions: (where * is the representative: Fckconfig.linkupload, Fckconfig.imageupload, etc.) to allow the upload of the file suffix name, empty means allow all files, you can set the upload file suffix according to your needs, to a certain extent, to increase security, the format can refer to its existing suffix settings.
*. Deniedextensions: Ibid., which indicates that the file suffix name is forbidden to upload.
Note: You set the Allow upload, of course, it is forbidden to set up, I recommend the settings allowed, after all, the list of prohibited suffixes can not be listed completely, there may be a lot of the suffix we have never thought of.
The configuration of the JS file to this has been completed, below we do two PHP files in the upload aspect of the settings:
File Browse upload changes:
Opens the editor/filemanager/browser/default/connectors/php/config.php file and found:
$Config [' Enabled '] = false; (line 28th) Change false to True, which allows uploading.
$Config [' userfilespath '] = '/userfiles/'; (line 32nd) to define the upload directory, you can modify it according to your own circumstances, I will change it to upload directory.
Note : Be aware that FCKeditor does not support virtual directories, and all of your paths are absolute paths to the root of the Web site.
File quick upload changes:

Open a file editor/filemanager/upload/php/config.php file to find
$Config [' Enabled '] = false; (line 28th) changes false to True.
$Config [' userfilespath '] = '/userfiles/'; (line 35th) the upload directory with "file browse upload".
$Config [' usefiletype '] = false; (line 32nd) to true, otherwise the upload file will not be placed in the upload directory
In this file, there is one more item:
$Config [' userfilesabsolutepath '] = '; (line 41st)
The role of this is to set the absolute path of the upload, for example, you want to specify the upload file to d:/web/upload/, you can specify its value for your absolute path, note that if you specify the value, then you have to $config[' userfilespath '] = '/ Userfiles/'; Make the same settings.
By the end of the basic configuration of this upload, the basic configuration of the entire editor has been completed, and you can call the test with the following code:
[PHP] Include ("/fckeditor/fckeditor.php"); Contains the FCKeditor class, the FCKeditor directory is placed under the Web site root directory
$BasePath = "/fckeditor/"; Editor Path
$oFCKeditor = new FCKeditor (' Jayliao '); Create a FCKeditor object with the form name Jayliao
$oFCKeditor->basepath = $BasePath;
$oFCKeditor->value = ' Test '; Set the form initial value

You can also set the following sections (the "=" include section), not necessarily:
//==================================================================================//
$oFCKeditor->width = ' 100% '; Editor width, the class has a default value, if you do not want to modify it, regardless of the
$oFCKeditor->height= ' 300 '; Same width, here is high $ofckeditor->toolbarset
$oFCKeditor->toolbarset = ' Jayliao '; The Default Editor toolbar has basic (Basic tools) and default (all tools) two options, Jayliao for my custom toolbar, if necessary, refer to the following instructions to create new or modify the tool bar
$oFCKeditor->config[' skinpath '] = '/fckeditor/editor/skins/office2003/'; Setting editor Skins
//==================================================================================//

$oFCKeditor->create (); Calling a method in a class, you must
? >[/php]
Quickly test it, is not very excited, finally can see this powerful editor. However, immediately you will find that in the upload of the Chinese name of the file will appear garbled, this is what is going on? Oh, not afraid, the following we will be the simple modification of the problem will soon be resolved:
To upload a file with a time + random number as its new name, open: editor/filemanager/upload/php/upload.php, find:
[php] $sFileName = $oFile [' name ']; [/php]
To be replaced by:
[php] $sFileName = $oFile [' name '];
$sOriginalFileName = $sFileName;
$sExtension = substr ($sFileName, (Strrpos ($sFileName, '. ') + 1));
$sExtension = Strtolower ($sExtension);
$sFileName = Date ("Ymdhis"). Rand (100, 200). ".". $sExtension; [/php]
Haha, you will find the "fast upload" garbled has been resolved, so simple, happy not to forget, the same, you also need to modify the "browse" upload, modify the file: editor/filemanager/browser/default/connectors/php/ commands.php, the contents of the amendment ibid.
Another: You upload the Chinese file does not make the above name modification may not be garbled on the server, if you just to let the editor display the file name correctly when browsing, then you can make the following changes, open: editor/filemanager/browser/default/ connectors/php/util.php, modify the Converttoxmlattribute function to:

Return Utf8_encode (Htmlspecialchars ($value));
Modified to:

Return Iconv ("GBK", "UTF-8", Htmlspecialchars ($value));
In this way, your editor should already be able to display the Chinese name correctly, but it is strongly recommended that you modify the name of the uploaded file, the Chinese name may be a lot of inconvenience.
When the above set up, FCKeditor has been able to meet our daily use needs, but we have found a problem, that is, the uploaded files we can not delete, which will make the site of junk files (mainly pictures) increasing, Is it possible for us to remove useless uploads by modifying the editor to make it easier to manage? It is not difficult to think of FCKeditor's browse file function, the appropriate extension of the function, the daily upload of the file management has become quite simple, then we do it quickly:
Add this feature our modified page is: fckeditor/editor/filemanager/browser/default/frmresourceslist.html
The first step is to add the following code to the body area of the page:



Note: The role of the first pair is when we move the mouse to the uploaded file to display its relevant information, the role of the tag is for us to delete the upload file when the Action Response window, that is, our deletion action in the IFRAME run, the purpose is to achieve pseudo-no flush delete effect The last couple's role is to display the list of uploaded files and folders (2.4 has made adjustments to the contents of the tag in the previous version, the old version of this page

As a storage list container, and the new version of the display container directly generated in JS, in order to make the file display div and iframe two sets of labels to use, so in the body tag to add a pair of tags, so that it can be normal use, in my attempt, if not such modification seems to be wrong, of course, I do not rule out the reason for

In the second step, add the following in the JS code area of the file:

Copy the Code code as follows:
Add by Jayliaoscu @ 2007-04-23/*{{{{*/
Show file display layer
function Showdiv (FILEURL)
{
var name = FILEURL;
Get file type
var suffix = name.substring (Name.lastindexof (".") +1);

var div= document.getelementbyid ("Showfile");
Div.content = "";
Div.style.position = "absolute";
Div.content + = "










"; if (suffix== ' gif ' | | suffix== "JPG" | | suffix== "JPEG" | | suffix== "BMP" | | suffix== "PNG") {div.content + = " "; } else {div.content + = " "; } Div.content + = "
Shut down Delete
(+) this.width=250 ' style= ' margin:3px; ' >
The type cannot be previewed
";
div.innerhtml = div.content;
Div.style.display = "";
Div.style.top = event.y+document.body.scrolltop+10;
Div.style.left = event.x+document.body.scrollleft+30;
}
Hide file Display layer
function Hiddendiv ()
{
var div= document.getelementbyid ("Showfile");
Div.style.display = "None";
}
Deleting files in an IFRAME
function Delfile (FILEURL)
{
if (!confirm (' Are you sure to delete the file? '))
Return
var url = '/fckeditor/del_file.php?filepath= ' + fileUrl;
window.open (URL, "Iframe_del");
Refresh ();
}
///*}}}*/

The third step, modify this page original JS
Modify:
Copy CodeThe code is as follows:
Olistmanager.clear = function ()
{
Document.body.innerHTML = ";
}

For:
Copy CodeThe code is as follows:
Olistmanager.clear = function ()
{
Hiddendiv ();
document.getElementById ("Body_content"). InnerHTML = '; Body_content for the DIV tag we added in the body area
}

Found it:
Copy CodeThe code is as follows:
var slink = ';

Modified to:
Copy CodeThe code is as follows:
var slink = '; That is, the file information display function

Modify:
Copy CodeThe code is as follows:
function Refresh ()
{
Loadresources (Oconnector.resourcetype, Oconnector.currentfolder);
}

For:
Copy CodeThe code is as follows:
function Refresh ()
{
Hiddendiv (); Changes made to hide the file display layer by default in order to refresh the list
Loadresources (Oconnector.resourcetype, Oconnector.currentfolder);
}

Modify function: Getfoldersandfilescallback, find:
Copy CodeThe code is as follows:
Document.body.innerHTML = Ohtml.tostring ();

Modified to:
Copy CodeThe code is as follows:
document.getElementById ("Body_content"). InnerHTML = Ohtml.tostring ();

Finally, add a file to delete the page del_file.php (the file path and add the JS function Delfile (FILEURL) in the call consistent), the role of deleting the file, give a successful operation hint, reference code:
Copy CodeThe code is as follows:
[PHP] $filePath = "...". Trim ($_get[' filePath ');
if ($filePath)
{
@unlink ($filePath);
echo "";
}
Else
{
echo "";
}
? >[/php]


At this point, I fckeditor the modification of the basic completion, of course, these changes are only for fckeditor modification use of a reference, to give you a guide, I hope to help beginners. Later on the editing process of the editor in a hurry, did not modify one step to complete the document writing, so, inevitably some error, hope forgive me, if you have any problems and errors found welcome contact me to discuss with each other, common progress.
Also attached:
The main configuration items in the configuration file (Fckconfig.js) are as follows, configured according to your own situation:

1.fckconfig.customconfigurationspath = "; Custom configuration file path and name
2.fckconfig.editorareacss = Fckconfig.basepath + ' css/fck_editorarea.css '; Style sheet file for edit area
3.fckconfig.basehref = "; Relative link to base address
4.fckconfig.debug = True/false; Whether the debug function is turned on, when Fckdebug.output () is called, the content is output in the debug window
5.fckconfig.skinpath = Fckconfig.basepath + ' skins/default/'; Set Skin
6.fckconfig.autodetectlanguage = True/false; Whether the language is automatically detected
7.fckconfig.defaultlanguage = ' ZH-CN '; Setting the default language
8.fckconfig.contentlangdirection = ' LTR/RTR '; Default text direction, ltr left, RTR right
9.fckconfig.fillemptyblocks = True/false; With this feature, empty block-level elements can be replaced with empty Glyd
10.fckconfig.formatsource = True/false; Whether to automatically format the code when switching to Code view
11.fckconfig.formatoutput = True/false; Whether the code is automatically formatted when the content is output
12.fckconfig.formatindentator = ""; When indenting code uses characters under "source format"
13.fckconfig.geckousespan = True/false; Whether to allow span tags instead of b,i,u tags
14.fckconfig.startupfocus = True/false; Whether the focus is to the editor when turned on
15.fckconfig.forcepasteasplaintext = true/false;//Force Paste as plain text
16.fckconfig.forcesimpleampersand = True/false; Do not convert the & symbol to an XML entity
17.fckconfig.tabspaces = 0/1; tab is valid
18.fckconfig.tabspaces = 4; The number of space characters that the TAB key produces
19.fckconfig.showborders = True/false; Whether to merge borders
20.fckconfig.toolbarstartexpanded = True/false; The toolbar expands when the page is loaded, and appears only when the toolbar is expanded.
21.fckconfig.toolbarcancollapse = True/false; Whether to allow the Collapse toolbar to be expanded
22.fckconfig.toolbarsets = object; Editor's toolbar, you can define, delete, can refer to existing toolbar
23.fckconfig.entermode = ' P '; Direct carriage return in the editor, generated in code, selectable as P | div | Br
24.fckconfig.shiftentermode = ' BR '; Shift+ Enter in the editor, generated in code, optional p | div | Br
25.fckconfig.contextmenu = array of strings; Contents of the right-click menu
26.fckconfig.fontcolors = ""; Text Color list
27.fckconfig.fontnames = ""; Font list
28.fckconfig.fontsizes = ""; Font Size list
29.fckconfig.fontformats = ""; Text Format list
30.fckconfig.stylesxmlpath = ""; The location of the XML file for the CSS style list
31.fckconfig.templatesxmlpath = ""; XML file location for templates
32.fckconfig.spellchecker = "Iespell/spellerpages"; Spell checker
33.fckconfig.iespelldownloadurl = ""; Download the spelling checker URL
34.fckconfig.smileypath = Fckconfig.basepath + ' images/smiley/msn/'; Expression File storage path
35.fckconfig.smileyimages = "; List of expression file names, specific reference to default settings
36.fckconfig.smileycolumns = 8; Expression window display expression column number
37.fckconfig.smileywindowwidth = 320; The expression window displays the width, and this window will be adjusted for changes to the emoticon file.
38.fckconfig.smileywindowheight = 240; The expression window displays the height, and this window will be adjusted for changes to the emoticon file.
39.fckconfig.fullpage = True/false; Whether to allow editing of the entire HTML file, or only allow editing of the contents of the body

http://www.bkjia.com/PHPjc/327485.html www.bkjia.com true http://www.bkjia.com/PHPjc/327485.html techarticle Preface: Fckeidtor is a foreign multi-language editor, you can make simple changes to its configuration file to support the current common web development language applications, the following I would like to talk about FCKeditor the most ...

  • Related Article

    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.