Explore the FCKeditor in PHP configuration _php skills

Source: Internet
Author: User

Objective:
Fckeidtor is a foreign multi-language editor, you can make a simple change to its profile to support the current common web development language applications, I will talk about the latest version of the FCKeditor 2.4.2 in the specific configuration of PHP, there are deficiencies and errors in the place, please correct me.

Streamline:
Just because the editor is multilingual, we first remove the redundant files for use with them.

1, temporary files and folder deletion: Start from the root directory to delete everything to "_" Files and folders, because they are temporary files and folders. Delete such temporary files and folders, we also want to delete some of the root directory of unnecessary files, the root directory we only retain fckconfig.js (configuration file), Fckeditor.js (JS method 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 be deleted according to your own server use, recommended to keep, fckeditor_php4.php (php4 call file), fckeditor_php5.php (php5 call file), Fckstyles.xml (style) , fcktemplates.xml (template) files, and editor folders.
2, Editor/lang directory: Storage is a multilingual configuration file, because we can only use en and zh-cn (Simplified Chinese) So, according to my choice, I deleted other language profiles.
3, Editor/skins interface directory: Default with three interface (default: The interface, loading speed relatively fast; Office2003: Relative to the PP interface, but the speed is indeed slower; Silver: silvery-white interface, loading speed is also relatively fast), You can decide whether to delete one or two of them.
4, Editor/filemanager/browser/default/connectors directory: storage editor supported by the Web dynamic language, we take PHP as an example, so keep the PHP directory, test.html files can help you check the language of the upload settings (specific upload settings I will be in the later configuration for a more detailed explanation), you can decide whether to delete.
5, Editor/filemanager/upload directory: the same.
To this streamlined completion, you will find that the entire editor is really "thin" a lot of, hehe

Basic configuration:
I'm going to start with a simple configuration of the editor (not every step of the way, you can modify 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 acts to automatically detect the language, default to True, That means that 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 Simplified Chinese "zh-cn".
2. Font list
Still open fckconfig.js, because this editor for foreigners to write, so the default does not provide Chinese fonts, we add to it, find Fckconfig.fontnames (line 142th) to join the "XXFarEastFont-Arial _gb2312; XXFarEastFont-Arial Bold; Other fonts can be added to their own needs.
3, File upload
FCKeditor file Management program in the editor/filemanager/folder, divided into browsing (browser) and upload (upload) two kinds. Browse means the Browse server already has a file and can choose can also upload local files to the server, upload refers to the rapid upload, the window midpoint "Upload" option, select Local file upload on the line, but can not see the server has uploaded files, relatively inconvenient, but more efficient operation. That is, there is a file browsing in FCKeditor, there are two files uploaded, and these settings are scattered in multiple files, the configuration is relatively complex, let me roughly say:
In FCKeditor there are three files with the upload function, one is JS file, two PHP files, the former closed after the interface does not appear related to the window or button, the latter closed after the relevant features are not available.
JS file refers to the Fckconfig.js file, in the previous version of the Fckconfig.js first you must open the following:
Browse upload function:

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

Quick Upload function:

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

That is, to set these items to true, And we use today's 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 better), considering the security you may need to turn off the file upload function, then you only need to Set to False (of course two PHP files you do not turn on the upload function OH).
If you want to use the file upload function, 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, modify accordingly:

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

We'll 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 little bit of a change to the upload vulnerability, but not very useful.
*. Allowedextensions: (of which * symbol: Fckconfig.linkupload, Fckconfig.imageupload, etc.) indicates that the file suffix allowed to be uploaded is null to allow all files, you can set the file suffix according to your own needs, to a certain extent to increase security, the format can be set to reference its existing suffix name settings.
*. Deniedextensions: Ibid., indicates the file suffix name that prohibits uploading.
Note: You set up to allow the upload, of course, do not need to set the ban, I recommend the settings allowed, after all, prohibited suffix list can not be listed completely, there may be many we do not think of the suffix name.
JS file configuration To this has been completed, below we make two PHP files in the upload settings:
File Browsing Upload modification:
Open the editor/filemanager/browser/default/connectors/php/config.php file and find:
$Config [' Enabled '] = false; (line 28th) to change false to true, that is, allow uploads.
$Config [' userfilespath '] = '/userfiles/'; (line 32nd) for the definition of upload directory, can be modified according to their own situation, I will change it to upload directory.
Note : Note that FCKeditor does not support virtual directories, all of your paths are absolute paths to the site's root directory.
Quick File Upload modification:

Open file editor/filemanager/upload/php/config.php file, find
$Config [' Enabled '] = false; (line 28th) to change false to true.
$Config [' userfilespath '] = '/userfiles/'; (line 35th) upload directory with "file browsing upload".
$Config [' usefiletype '] = false; (line 32nd) to True, or upload files will not be placed in the upload directory
In this file, there is another item:
$Config [' userfilesabsolutepath '] = '; (line 41st)
The role of this is to set the absolute path of 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 setting.
To upload the basic configuration has been completed, the entire editor is the most basic configuration is over, you can use the following code to call it test:
[php]<?php
Include ("/fckeditor/fckeditor.php"); Contains the FCKeditor class, FCKeditor directory is placed under the site root directory
$BasePath = "/fckeditor/"; Editor Path
$oFCKeditor = new FCKeditor (' Jayliao '); Creates a FCKeditor object with the name of the form Jayliao
$oFCKeditor->basepath = $BasePath;
$oFCKeditor->value = ' Test '; Set the form's initial value

You can also set the following sections (the "=" include part) and do not have to:
//==================================================================================//
$oFCKeditor->width = ' 100% '; Editor width, there are default values in the class, and if you do not want to modify this
$oFCKeditor->height= ' 300 '; With width, here is high $ofckeditor->toolbarset
$oFCKeditor->toolbarset = ' Jayliao '; The Default Editor toolbar has the basic (Basic tools) and default (all tools) two options, Jayliao for my custom toolbar, if necessary, refer to the following instructions to create or modify the tool bar
$oFCKeditor->config[' skinpath '] = '/fckeditor/editor/skins/office2003/'; Set Editor Skin
//==================================================================================//

$oFCKeditor->create (); To invoke 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 in the upload of Chinese-named files will appear garbled, this is what is going on? Oh, not afraid, the following we will be simple to modify the problem quickly resolved:
We will upload the file with 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 "fast upload" garbled has been resolved, it is so simple, happy not to forget, the same, but also need to modify the "browse" upload, modify the file: editor/filemanager/browser/default/connectors/php/ commands.php, revise content ditto.
Another: You upload the Chinese file does not do the above name modification may not be garbled on the server, if you just to browse the time to let the editor correctly display the name of the class, 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 setup, FCKeditor has been able to meet our daily use needs, but we have found a problem, that is uploaded files we can not delete, which will make the site of the garbage files (mainly pictures) increasing, Is it possible for us to remove unwanted uploads by modifying the editor to make it easier to manage? It is not difficult to think of FCKeditor browsing file function, the function of the appropriate expansion of the daily upload of the file management becomes quite simple, then we quickly do it:
Add this feature we modified the page as: fckeditor/editor/filemanager/browser/default/frmresourceslist.html
The first step is to add the following code to the body area of the page:

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

Description: The first <div></div> role is when we move the mouse to the uploaded file to display its relevant information;<iframe></iframe> The role of the tag is for us to delete the upload file when the Action Response window, that is, our delete action in the IFRAME to run, the purpose is to achieve the fake no refreshing delete effect; last pair <div></div> The role is to display the list of uploaded files and folders (2.4 compared to the previous version of the <body></body> label content has been adjusted, the old version of the page to <table></table> as a storage list of containers, And the new version will display the container in JS generated, in order to make the file display div and iframe two groups of labels normal use, so in the body tag to add a pair of <div></div> tags, so that it can be used normally, in my attempt, if not such modifications seem to be wrong, Of course, I do not rule out the reasons for improper

The second step is to add in the JS code area of the file:

Copy 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 + + <table width= ' 256 ' border= ' 0 ' cellpadding= ' 3 ' cellspacing= ' 1 ' bgcolor= ' #737357 ' ><tbody> &LT;TR&GT;&LT;TD height= ' align= ' left ' bgcolor= ' #C7C78F ' ><table width= ' 100% ' height= ' 100% ' border= ' 0 ' cellpadding= ' 0 ' cellspacing= ' 0 ' ><tbody><tr><td width= ' 47% ' > <a ' javascript: ' href= ' Hiddendiv (); ' ><font color= ' #000000 ' style= ' text-decoration:none; ' > Close </font></a></td><td width= ' 53% ' 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= ' align= ' center ' bgcolor= ' #C7C78F ' ><strong> the 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 file Display layer
function Hiddendiv ()
{
var div= document.getelementbyid ("Showfile");
Div.style.display = "None";
}
Delete a file 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 Code code as follows:

Olistmanager.clear = function ()
{
Document.body.innerHTML = ';
}

For:
Copy Code code 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 Code code as follows:

var slink = ' <a href= ' # "onclick=" OpenFile (/' + fileurl.replace (/'/g, '///') + '/'); return false; " > ';

Modified to:
Copy Code code as follows:

var slink = ' <a href= ' # "onmouseover=" Showdiv (/' + FILEURL + '/'); "onclick=" openfile (/' + fileurl.replace (/'/g, '// /') + '/'); return false;     > '; That is, the file information display function

Modify:
Copy Code code as follows:

function Refresh ()
{
Loadresources (Oconnector.resourcetype, Oconnector.currentfolder);
}

For:
Copy Code code as follows:

function Refresh ()
{
Hiddendiv (); Changes made to the default hidden file display layer for refreshing the list
Loadresources (Oconnector.resourcetype, Oconnector.currentfolder);
}

Modify function: Getfoldersandfilescallback, find:
Copy Code code as follows:

Document.body.innerHTML = Ohtml.tostring ();

Modified to:
Copy Code code 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 JS function Delfile (FILEURL) in the same call), the role of the deletion of files, give the success or failure of the operation prompts, reference code:
Copy Code code as follows:

[php]<?php
$filePath = ".." Trim ($_get[' filePath ']);
if ($filePath)
{
@unlink ($filePath);
echo "<script>alert" (' Delete succeeded. ');</script> ";
}
Else
{
Echo ' <script>alert (' delete error, may not exist or has been deleted. ');</script> ";
}
? >[/php]


At this point, I fckeditor for the basic completion of the changes, of course, these changes are only the use of FCKeditor modified to give you a reference, hoping to help beginners. Later on the editor to modify the process of a hurry, did not modify a step-by-step document writing, so, inevitably some mistakes, I hope to forgive, if you have any problems and errors found welcome to contact me to discuss and progress together.
also attached:
The main configuration items in the configuration file (Fckconfig.js) are as follows, configured according to your situation:

1.fckconfig.customconfigurationspath = '; Custom profile path and name
2.fckconfig.editorareacss = Fckconfig.basepath + ' css/fck_editorarea.css '; Style sheet file for edit area
3.fckconfig.basehref = '; Base Address of relative links
4.fckconfig.debug = True/false; Whether debugging is turned on, and when Fckdebug.output () is invoked, the contents are output in the debug window
5.fckconfig.skinpath = Fckconfig.basepath + ' skins/default/'; Set Skin
6.fckconfig.autodetectlanguage = True/false; Whether to automatically detect languages
7.fckconfig.defaultlanguage = ' ZH-CN '; Set the default language
8.fckconfig.contentlangdirection = ' LTR/RTR '; Default text direction, ltr left, RTR right
9.fckconfig.fillemptyblocks = True/false; Using this feature, you can replace empty block-level elements with empty cells
10.fckconfig.formatsource = True/false; Automatically format code when switching to Code view
11.fckconfig.formatoutput = True/false; Whether to automatically format the code when the content is output
12.fckconfig.formatindentator = ""; To indent the characters used by the code under "source format"
13.fckconfig.geckousespan = True/false; Allow span markers to replace b,i,u tags
14.fckconfig.startupfocus = True/false; Focus to editor on Open
15.fckconfig.forcepasteasplaintext = true/false;//Forced paste as plain text
16.fckconfig.forcesimpleampersand = True/false; Do not convert & symbols to XML entities
17.fckconfig.tabspaces = 0/1; Whether the tab is valid
18.fckconfig.tabspaces = 4; Number of space characters produced by the TAB key
19.fckconfig.showborders = True/false; Whether to merge borders
20.fckconfig.toolbarstartexpanded = True/false; When the page is loaded, does the toolbar expand, and the Point "expand Toolbar" appears
21.fckconfig.toolbarcancollapse = True/false; Whether to allow expansion of the collapse toolbar
22.fckconfig.toolbarsets = object; Editor toolbar, can be defined by itself, cut, can refer to the existing toolbar
23.fckconfig.entermode = ' P '; Direct return in the editor, generated in code, optional p | div | Br
24.fckconfig.shiftentermode = ' BR '; shift+ carriage return in the editor, generated in code, optional p | div | Br
25.fckconfig.contextmenu = array of strings; Right-click the contents of the 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 = ""; Template's XML file location
32.fckconfig.spellchecker = "Iespell/spellerpages"; spelling checker
33.fckconfig.iespelldownloadurl = ""; Download the spelling checker URL
34.fckconfig.smileypath = Fckconfig.basepath + ' images/smiley/msn/'; Expression File Store path
35.fckconfig.smileyimages = '; Expression file name list, specific reference default settings
36.fckconfig.smileycolumns = 8; The expression window shows the number of expression columns
37.fckconfig.smileywindowwidth = 320; The expression window shows the width, and this window adjusts for changes in the expression file.
38.fckconfig.smileywindowheight = 240; The expression window shows the height, and this window adjusts for changes in the expression file.
39.fckconfig.fullpage = True/false; Whether to allow editing of the entire HTML file, or only to edit the content between the body

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.