Exploring fckeditor configuration in Php

Preface:
FCKeidtor is a foreign multi-language editor. You can simply modify its configuration file to support applications that currently use common Web development languages, next, let's talk about the specific configuration process of the latest FCKeditor version 2.4.2 in php. If there are any deficiencies or errors, please correct me.

Simplified:
Because the Editor supports multiple languages, we first Delete redundant files for use.

1. Delete temporary files and folders: delete all files and folders starting with "_" from the root directory because they are temporary files and folders. After deleting these temporary files and folders, we also need to delete unnecessary files under some root directories. We only keep fckconfig in the root directory. js (configuration file), fckeditor. js (js call file), fckeditor. php (php calls a file. The new version uses this file to call the php4 or php5 call file. You can delete fckeditor_php4.php/fckeditor_php5.php based on your server usage. We recommend that you keep the file) fckeditor_php4.php (php4 call file), fckeditor_php5.php (php5 call file), fckstyles. xml (style), fcktemplates. xml (Template) file and editor folder.
2. editor/lang Directory: stores multilingual configuration files, because we only use en and zh-cn (Simplified Chinese, I deleted other language configuration files.
3. editor/skins Interface directory: by default, there are three interfaces (default: default Interface, loading speed is relatively fast; office2003: relative pp interface, but the speed is indeed slower; silver: silver-white interface, loading speed is relatively fast), you can decide whether to delete one or two of them.
4. editor/filemanager/browser/default/connectors directory: the webdynamic language supported by the storage and editing tool. We use PHP as an example to reserve the PHP Directory. The test.html file can help you view the upload settings in a language. (The specific upload settings will be described in more detail later.) You can decide whether to delete them.
5. editor/filemanager/upload Directory: the same is true.
After streamlining, you will find that the entire editor is indeed "slimming" a lot.

Basic Configuration:
Next I will start to configure the editor in a simple way (not every step is required. You can refer to the modification as needed ):
1. default language
Open fckconfig. js file (note that this file is UTF-8 encoded), find FCKConfig. autoDetectLanguage = true; (row 56th) This sentence serves as an automatic detection language. The default value is true, indicating that the editor will automatically detect and load the corresponding language based on the system language. We will change it to false, do not let it detect, and then set FCKConfig. defaultLanguage = 'en'; (the default language of the editor, line 1) is changed to simplified Chinese "zh-cn ".
2. Font list
Enable fckconfig. js. Because this editor is compiled by foreigners, Chinese fonts are not provided by default. We will add it and find FCKConfig. add "; _ GB2312; new ;" to FontNames (row 142nd). Add other fonts as needed.
3. File Upload
In the editor/filemanager/folder, The FCKeditor file management program is divided into browser and upload. "Browse" indicates that a file already exists on the Browser Server and can be selected or uploaded to the server. "Upload" indicates fast upload. In the window, click "Upload, select a local file and upload it. However, you cannot view the uploaded files on the server. This is relatively inconvenient, but it is faster. That is to say, FCKeditor has a file browsing and two files are uploaded. these settings are scattered in multiple files and the configuration is relatively complicated. Let's give a rough description of the configuration below:
In FCKeditor, there are three files related to the upload function. One is a js file and the other is a PHP file. After the former is disabled, no related windows or buttons appear on the interface, the latter is disabled and related functions are unavailable.
The js file refers to the fckconfig. js file. In the earlier version of fckconfig. js, you must first enable the following items:
Browse and upload:
 
FCKConfig. LinkBrowser = true; // File
FCKConfig. ImageBrowser = true; // picture
FCKConfig. FlashBrowser = true; // Flash

Quick upload:

FCKConfig. LinkUpload = true; // same as above
FCKConfig. ImageUpload = true; // same as above
FCKConfig. FlashUpload = true; // same as above

That is, set these items to true, and the fckconfig of 2.4.2 we use today. the upload display function is enabled by default in js. Therefore, if you want to use this editor as the front-end (the fckeditor upload vulnerability has not been significantly improved ), for security reasons, you may need to disable the file upload function, so you only need to set these items to false (of course, you do not need to enable the upload function for two PHP files ).
If you want to use the file upload function, we will continue to configure:
In the fckconfig. js file, fckeditor supports asp by default. Find the following two sentences and modify them accordingly:

Var _ FileBrowserLanguage = 'asp '; // asp | aspx | cfm | lasso | perl | php | py (row 182nd)
Var _ QuickUploadLanguage = 'asp '; // asp | aspx | cfm | lasso | php (row 183rd)

We changed them to 'php ':

Var _ FileBrowserLanguage = 'php'; // asp | aspx | cfm | lasso | perl | php | py (row 182nd)
Var _ QuickUploadLanguage = 'php'; // asp | aspx | cfm | lasso | php

In version 2.4.2, we found that support for more file extensions was added. This should be a few changes to solve the upload vulnerability, but it is not helpful.
*. AllowedExtensions: (* Indicates FCKConfig. linkUpload, FCKConfig. imageUpload, etc.) indicates the suffix of the file to be uploaded. If it is null, it indicates that all files are allowed. You can set the suffix of the file to be uploaded based on your needs. This increases security to a certain extent, you can refer to its existing extension settings for the set format.
*. DeniedExtensions: Same as above, indicating the suffix of the file to be uploaded.
Note: If you have set upload permission, of course you do not need to set the prohibited content. I recommend that you set the allowed content. After all, the banned Suffix List cannot be fully listed, there may be many extensions that we never imagined.
The configuration of the js file has been completed. Next we will set the upload of two PHP files:
File browsing upload modification:
Open the editor/filemanager/browser/default/connectors/php/config. php file and find:
$ Config ['enabled'] = false; (row 28th) Change "false" to "true" to allow upload.
$ Config ['userfilespath'] = '/userfiles/'; (row 32nd) defines the upload Directory, which can be modified according to your own situation. I will change it to the upload directory.
Note: FCKeditor does not support virtual directories. All your paths are absolute paths for the root directory of the website.
Fast File Upload and modification:
Open the file editor/filemanager/upload/php/config. php and find
$ Config ['enabled'] = false; (row 28th) Change "false" to "true.
$ Config ['userfilespath'] = '/UserFiles/'; (row 35th) is the same as the upload directory of "file browsing and uploading.
$ Config ['usefiletype'] = false; (row 32nd) changed to true. Otherwise, the uploaded files will not be placed in the upload directory.
In this file, there is another item:
$ Config ['userfilesabsolutepath'] = ''; (row 41st)
This is used to set the absolute upload path. For example, if you want to upload a file to D:/Web/upload/, you can specify its value as your absolute path. Note, if you specify this value, you must also set $ Config ['userfilespath'] = '/UserFiles.
Now the basic configuration of the entire editor has been uploaded, and the most basic configuration of the editor has been completed. You can use the following code to call and test it:
[Php] <? Php
Include ("/fckeditor. php"); // contains the fckeditor class. Put the fckeditor directory under the website root directory.
$ BasePath = "/fckeditor/"; // editor path
$ OFCKeditor = new FCKeditor ('jayliao'); // create a fckeditor object named jayliao
$ OFCKeditor-> BasePath = $ BasePath;
$ OFCKeditor-> Value = 'test'; // you can specify the initial Value of a form.

// You can also set the following parts ("="), not required:
// ================================================ ========================================================== ===== //
$ OFCKeditor-> Width = '000000'; // editor Width. The default value exists in the class. If you do not want to modify the value, skip this item.
$ OFCKeditor-> Height = '000000'; // same width, which is high $ oFCKeditor-> ToolbarSet
$ OFCKeditor-> ToolbarSet = 'jayliao'; // The Default editor toolbar has two options: Basic (Basic tool) and Default (all tools). JayLiao is the custom toolbar, if necessary, refer to the instructions below to create or modify a toolbar.
$ OFCKeditor-> Config ['skiconpath'] = '/fckeditor/editor/skins/office2003/'; // set the editor skin
// ================================================ ========================================================== ===== //

$ OFCKeditor-> Create (); // call the method in the class, required
?> [/Php]
Let's test it. Isn't it so excited that we can finally see this powerful editor. However, you will immediately find garbled characters when uploading files named in Chinese. What is the problem? Haha, don't be afraid. Let's make a simple modification to it and the problem will be solved soon:
For the file to be uploaded, use the time + random number as its new name. Open editor/filemanager/upload/php/upload. php and find:
[Php] $ sFileName = $ oFile ['name']; [/php]
Replace:
[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 that the garbled code for "quick upload" has been solved. It's so easy. Don't forget it. Similarly, you also need to modify the "Browse" upload and modify the file: editor/filemanager/browser/default/connectors/php/commands. php. The modification content is the same as above.
In addition, the name of the uploaded Chinese file may not be garbled on the server. If you only want the editor to correctly display the file name when browsing, you can make the following modifications, open: editor/filemanager/browser/default/connectors/php/util. php: Modify the ConvertToXmlAttribute function:

Return utf8_encode (htmlspecialchars ($ value ));
To:

Return iconv ("GBK", "UTF-8", htmlspecialchars ($ value ));
In this way, your editor should be able to correctly display the Chinese name, but it is strongly recommended that you modify the name of the uploaded file. The Chinese name may be inconvenient.
After the above settings are completed, fckeditor can meet our daily needs, but we find another problem, that is, the uploaded files cannot be deleted, this will increase the number of junk files (mainly images) on the website. Can we easily manage and delete useless uploaded files by modifying the editor? It is not hard to think of fckeditor's file browsing function. It is quite easy to extend the function and manage the files uploaded on a daily basis. Let's get started:
The modified page is fckeditor/editor/filemanager/browser/default/frmresourceslist.html.
Step 1: Add the following code in the page body area:

<Div id = "showFile" style = "float: left; display: none; background-color: #999999"> </div>
<Iframe id = "iframe_del" name = "iframe_del" width = "0" height = "0" scrolling = "no"> </iframe>
<Div id = "body_content"> </div>

Note: The Role of the first <div> </div> is to display relevant information when we move the cursor over the uploaded file; the <iframe> </iframe> label is used for the action response window when you delete an uploaded file. That is, you can run the delete action in iframe, the purpose is to achieve the effect of pseudo-brushless newest deletion; the last pair of <div> </div> is used to display the list of uploaded files and folders (2.4 is different from the previous version in the <body> </body> label, the old version of this page uses <table> </table> as the container for storing the list, and the new version will directly display the container generated in js, to make the div and iframe labels of the file display work properly, add a pair of <div> </div> labels to the body label to make it work normally. In my attempt, if you do not modify it like this, it seems wrong. Of course, the reasons for improper methods are not ruled out)

Step 2: add the following to the js Code area of the file:

Copy codeThe Code is as follows:
// Add by jayliaoscu @ 2007-04-23 /*{{{{*/
// Display the file display Layer
Function showDiv (fileUrl)
{
Var name = fileUrl;
// Obtain the file type
Var suffix = name. substring (name. lastIndexOf (".") + 1 );

Var div = document. getElementById ("showFile ");
Div. content = "";
Div. style. position = "absolute ";
Div. content + = "<table width = '000000' border = '0' cellpadding = '3' cellspacing = '1' bgcolor = '# 000000'> <tbody> <tr> <td height = '23' align = 'left' bgcolor = '# c7c78f'> <table width = '000000' height = '000000' border = '0' cellpadding = '0' cellspacing = '0'> <tbody> <tr> <td width = '000000'> <a href = 'javascript: 'onclick = 'hiddendiv (); '> <font color =' #000000 'style = 'text-decoration: none; '> close </font> </a> </td> <td width = '000000' align = 'right'> <a href = 'javascript: 'onclick = 'delfile (/"" + fileUrl + "/"); '> <font color =' #000000 'style = 'text-decoration: none; '> Delete </font> </a> </td> </tr> </tbody> </table> </td> </tr> ";
If (suffix = 'gif' | suffix = "jpg" | suffix = "jpeg" | suffix = "bmp" | suffix = "png")
{
Div. content + = "<tr> <td align = 'center' bgcolor = '# c7c78f'> 250) this. width = 250 'style = 'margin: 3px; '> </td> </tr> ";
}
Else
{
Div. content + = "<tr> <td height = '35' align = 'center' bgcolor = '# c7c78f'> <strong> This type cannot be previewed </strong> </td> </tr> ";
}
Div. content + = "</tbody> </table> ";
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 the file display Layer
Function hiddenDiv ()
{
Var div = document. getElementById ("showFile ");
Div. style. display = "none ";
}
// Delete an object in iframe
Function delFile (fileUrl)
{
If (! Confirm ('Are you sure you want to delete this file? '))
Return;
Var url = '/fckeditor/del_file.php? FilePath = '+ fileUrl;
Window. open (url, "iframe_del ");
Refresh ();
}
///*}}}*/

Step 3: modify the original js
Modify:
Copy codeThe Code is as follows:
OListManager. Clear = function ()
{
Document. body. innerHTML = '';
}

Is:
Copy codeThe Code is as follows:
OListManager. Clear = function ()
{
HiddenDiv ();
Document. getElementById ("body_content"). innerHTML = ''; // body_content is the div label we added in the body area.
}

Find:
Copy codeThe Code is as follows:
Var sLink = '<a href = "#" onclick = "OpenFile (/'' + fileUrl. replace (/'/g,' // '') + '/'); return false;"> ';

To:
Copy codeThe Code is as follows:
Var sLink = '<a href = "#" onmouseover = "showDiv (/'' + fileUrl +'/'); "onclick =" OpenFile (/''+ fileUrl. replace (/'/g,' // '') + '/'); return false;"> '; // displays the file information.

Modify:
Copy codeThe Code is as follows:
Function Refresh ()
{
LoadResources (oConnector. ResourceType, oConnector. CurrentFolder );
}

Is:
Copy codeThe Code is as follows:
Function Refresh ()
{
HiddenDiv (); // The file display layer is hidden by default to refresh the list.
LoadResources (oConnector. ResourceType, oConnector. CurrentFolder );
}

Modify the function: GetFoldersAndFilesCallBack. Find:
Copy codeThe Code is as follows:
Document. body. innerHTML = oHtml. ToString ();

To:
Copy codeThe Code is as follows:
Document. getElementById ("body_content"). innerHTML = oHtml. ToString ();

Finally, add a File Deletion page del_file.php (the file path is consistent with the call in the added js function delFile (fileUrl) to delete the file and provide a success or failure operation prompt, reference code:
Copy codeThe Code is as follows:
[Php] <? Php
$ FilePath = "...". trim ($ _ GET ['filepath']);
If ($ filePath)
{
@ Unlink ($ filePath );
Echo "<script> alert ('deleted successfully. '); </Script> ";
}
Else
{
Echo "<script> alert ('deletion error. The file may not exist or has been deleted. '); </Script> ";
}
?> [/Php]

At this point, I have basically completed the modification of fckeditor. Of course, these modifications are just a reference for the use of fckeditor. I hope they will be helpful to beginners. Later, the editing process of the editor was in a hurry and the document writing was not completed step by step. Therefore, some errors are inevitable. I hope you will forgive me. If you have any questions or errors, please contact me to discuss them, make progress together.
Appendix:
The main configuration items in the configuration file (fckconfig. js) are as follows:

1. FCKConfig. CustomConfigurationsPath = ''; // customize the path and name of the configuration file
2. FCKConfig. EditorAreaCSS = FCKConfig. BasePath + 'css/fck_editorarea.css '; // The style table file in the editing area
3. FCKConfig. BaseHref = ''; // The base address of the Relative Link
4. FCKConfig. Debug = true/false; // whether to enable the debugging function. When FCKDebug. Output () is called, the content is Output in the debugging window.
5. FCKConfig. SkinPath = FCKConfig. BasePath + 'Skins/default/'; // set skin
6. FCKConfig. AutoDetectLanguage = true/false; // whether to automatically detect the language
7. FCKConfig. DefaultLanguage = 'zh-cn'; // set the default language
8. FCKConfig. ContentLangDirection = 'ltr/rtr'; // default text direction, left for ltr and right for rtr
9. FCKConfig. FillEmptyBlocks = true/false; // this function can be used to replace empty block-level elements with spaces.
10. FCKConfig. FormatSource = true/false; // whether to automatically format the code when switching to the Code view
11. FCKConfig. FormatOutput = true/false; // whether the code is automatically formatted when the content is output
12. FCKConfig. FormatIndentator = ""; // The characters used to indent the code in "Source code format"
13. FCKConfig. GeckoUseSPAN = true/false; // whether to allow the SPAN flag to replace the B, I, U flag
14. FCKConfig. StartupFocus = true/false; // whether to FOCUS on the editor when enabled
15. FCKConfig. ForcePasteAsPlainText = true/false; // force the paste to plain text
16. FCKConfig. ForceSimpleAmpersand = true/false; // do not convert & into XML entities
17. FCKConfig. TabSpaces = 0/1; // whether the TAB is valid
18. FCKConfig. TabSpaces = 4; // number of spaces generated by the TAB key
19. FCKConfig. ShowBorders = true/false; // whether to merge borders
20. FCKConfig. ToolbarStartExpanded = true/false; // whether the toolbar is expanded when the page is loaded. It appears only when you click expand toolbar.
21. FCKConfig. ToolBarCanCollapse = true/false; // whether to show and collapse the toolbar
22. FCKConfig. ToolbarSets = object; // you can customize and delete the toolbar in the editor. For more information, see the existing toolbar.
23. FCKConfig. EnterMode = 'P'; // press enter in the editor to generate the file in the Code. Optional values: p | div | br
24. FCKConfig. ShiftEnterMode = 'br '; // Shift + press enter in the editor, which is generated in the Code. Optional values: p | div | br
25. FCKConfig. ContextMenu = string array; // context menu content
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 = ""; // location of the XML file in the CSS style list
31. FCKConfig. TemplatesXmlPath = ""; // XML file location of the template
32. FCKConfig. SpellChecker = "ieSpell/Spellerpages"; // spell checker
33. FCKConfig. IeSpellDownloadUrl = ""; // download the spelling checker URL
34. FCKConfig. SmileyPath = FCKConfig. BasePath + 'images/smiley/msn/'; // storage path of the emoticon File
35. FCKConfig. SmileyImages = ''; // list of emoticon file names. For details, refer to the default settings.
36. FCKConfig. SmileyColumns = 8; // Number of emoticon columns displayed in the emoticon window
37. FCKConfig. smiley1_wwidth = 320; // display width of the emoticon window. This window will be adjusted due to changes in the emoticon file.
38. FCKConfig. smiley1_wheight = 240; // The height of the emoticon window. This window will be adjusted due to changes in the emoticon file.
39. FCKConfig. FullPage = true/false; // whether to allow editing of the entire HTML file or only the content between the bodies