Discuss the detailed configuration of fckeditor in Php

前言：
　　FCKeidtor是个国外的多语言编辑器，你可以对其配置文件进行简单修改使之支持目前常用Web开发语言的应用，下面我就讲讲FCKeditor的最新版本2.4.2在php的具体配置过程，有不足和出错的地方，欢迎指正。

精简：
　　正因为这个编辑器是支持多语言的，所以首先我们针对使用对其做相应的冗余文件删除。

1、临时文件及文件夹删除：从根目录下开始删除一切以“_”开头的文件及文件夹，因为他们为临时文件和文件夹。删除这类临时文件及文件夹之后，我们还要删除一些根目录下的多余文件，根目录下我们只保留fckconfig.js（配置文件）、fckeditor.js（js方式调用文件）、fckeditor.php（php方式调用文件，新版本通过该文件统一调用php4或者php5的调用文件，fckeditor_php4.php/fckeditor_php5.php你可以根据自己服务器使用的情况删减，建议都保留）、fckeditor_php4.php（php4的调用文件）、fckeditor_php5.php（php5的调用文件）、fckstyles.xml（样式）、fcktemplates.xml（模板）文件和editor文件夹。
2、editor/lang目录：存放的是多语言配置文件，因为我们只可能用到en和zh-cn（简体中文）所以，根据我的选择，我删掉其他的语言配置文件。
3、editor/skins界面目录：默认带有三个界面（default：默认界面，加载速度相对较快；office2003：相对pp的界面，不过速度确实要慢些；silver：银白色界面，加载速度也相对较快），可以自行决定是否删除其中一两个。
4、editor/filemanager/browser/default/connectors目录：存放编辑器所支持的Web动态语言，我们以php为例所以保留php目录，test.html文件可以帮助你查看某语言下的上传设置等（具体上传设置我将在后面的配置作较为详细讲解），可以自行决定是否删除。
5、editor/filemanager/upload目录：同理。
到此精简完成，你会发现整个编辑器确实“瘦身”不少，呵呵

基本配置：
下面我开始对编辑器进行简单配置（并非每步都必须，可根据自己的需要参考修改）：
1、默认语言
打开fckconfig.js文件（注意此文件是utf-8编码哦），找到FCKConfig.AutoDetectLanguage = true ;（第56行）此句作用为自动检测语言，默认为true，即表示编辑器会根据系统语言自动检测加载相应的语言，我们将其改为false，不让其检测，然后将FCKConfig.DefaultLanguage = 'en';（编辑器默认语言，第57行）改为简体中文"zh-cn"。
2、字体列表
依然打开fckconfig.js，因为此编辑器为外国人编写，所以默认不提供中文字体，我们为其加入，找到FCKConfig.FontNames（第142行）加入“宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;”其他字体可根据自己需要自行加入。
3、文件上传
FCKeditor的文件管理程序在editor/filemanager/文件夹下，分为浏览（browser）和上传（upload）两种。“浏览”是指浏览服务器已存在文件并可以选择，也可以上传本地文件至服务器；上传是指快速上传，在窗口中点“上传”选项，选择本地文件后上传就行，但是不能查看服务器上已有上传文件，相对而言不太方便，只是操作更为快捷。也就是说FCKeditor中有一个文件浏览，有两个文件上传，而这些设置是分散在多个文件中，配置相对复杂，下面我大致讲一下：
在FCKeditor中共有三个文件跟上传功能有关，一个是js文件，两个是php文件，前者关闭后界面中不出现相关窗口或按钮，后者关闭后相关功能不可用。
js文件即是指的fckconfig.js文件，在以前旧版本的fckconfig.js中首先你必需开启如下几项：
浏览上传功能：

FCKConfig.LinkBrowser = true ; //文件
FCKConfig.ImageBrowser = true ; //图片
FCKConfig.FlashBrowser = true ; //Flash

快速上传功能：

FCKConfig.LinkUpload = true ; //同上
FCKConfig.ImageUpload = true ; //同上
FCKConfig.FlashUpload = true ; //同上

在2.4.2版本中，我们发现增加了对更多文件后缀名的支持，这个应该是为了解决上传漏洞所作的些许改动，不过作用不大。
*.AllowedExtensions：（其中*号代表：FCKConfig.LinkUpload、FCKConfig.ImageUpload等）表示允许上传的文件后缀名，为空表示允许所有文件，你可根据自己需要设置上传文件后缀名，一定程度增加安全性，设置的格式可以参考它已有的后缀名设置。
*.DeniedExtensions：同上，表示禁止上传的文件后缀名。
注：你设置了允许上传的，当然禁止的也就不必要设置了，本人推荐设置允许的，毕竟禁止的后缀名列表不能罗列完全，可能还有很多我们不曾想到的后缀名。
对js文件的配置到此已经完成，下面我们进行两个php文件在上传方面的设置：
文件浏览上传修改：
打开editor/filemanager/browser/default/connectors/php/config.php文件，找到：
$Config['Enabled'] = false ;（第28行）将false改为true，即允许上传。
$Config['UserFilesPath'] = '/userfiles/' ;（第32行）为定义上传目录，可根据自己情况进行修改，我将其改为upload目录。
注：注意FCKeditor是不支持虚拟目录的，你的所有路径都是针对网站根目录的绝对路径。
文件快速上传修改：
打开文件editor/filemanager/upload/php/config.php文件，找到
$Config['Enabled'] = false ;（第28行）将false改为true。
$Config['UserFilesPath'] = '/UserFiles/' ;（第35行）同“文件浏览上传”的上传目录。
$Config['UseFileType'] = false ; （第32行）改为true，不然上传文件不会放在上传目录中
在该文件中，还有一项：
$Config['UserFilesAbsolutePath'] = '' ;（第41行）
这项的作用是设定上传的绝对路径，比如，你想指定上传文件到D:/Web/upload/下，你可以指定它的值为你的绝对路径，注意，如果你指定了该值，那你也要对$Config['UserFilesPath'] = '/UserFiles/' ;作相同的设置。
到此上传基本配置已经完成，整个编辑器最基本的配置也已经结束了，你可以通过下列代码对其进行调用测试了：
[php]include("/fckeditor/fckeditor.php"); // 包含fckeditor类，fckeditor目录放在网站根目录下
$BasePath = "/fckeditor/"; // 编辑器路径
$oFCKeditor = new FCKeditor('jayliao'); // 创建一个fckeditor对象，表单的名称为jayliao
$oFCKeditor->BasePath = $BasePath;
$oFCKeditor->Value = 'test'; // 设置表单初始值

// 还可设置以下部分（“=”包含部分），并非必须：
//==================================================================================//
$oFCKeditor->Width = '100%'; // 编辑器宽度，类中有默认值，如果不想修改可不管此项
$oFCKeditor->Height= '300'; // 同width，此处为高$oFCKeditor->ToolbarSet
$oFCKeditor->ToolbarSet = 'JayLiao'; // 默认编辑器工具栏有Basic（基本工具）和Default（所有工具）两种选择，JayLiao为本人自定义的工具条，如有需要可参考后文中的说明新建或修改工具条
$oFCKeditor->Config['SkinPath'] = '/fckeditor/editor/skins/office2003/'; // 设置编辑器皮肤
//==================================================================================//

$oFCKeditor->Create(); // To call the method in the class, you must
?>[/php]
Hurry up and test it, aren’t you very excited, you can finally see this powerful Editor. However, you will soon find that garbled characters appear when uploading files named in Chinese. What is going on? Haha, don’t be afraid, we will simply modify it and the problem will be solved quickly:
We use time + random number as the new name of the uploaded file, open: editor/filemanager/upload/php/upload.php, Found:
[php]$sFileName = $oFile['name'] ;[/php]
replaced with:
[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 of "Quick Upload" has been solved, it's that simple, don't forget it when you are happy Again, you also need to modify the upload of "Browse" and modify the file: editor/filemanager/browser/default/connectors/php/commands.php. The modification content is the same as above.
Another: The Chinese file you uploaded without the above naming modification may not be garbled on the server. If you just want the editor to correctly display the file name when browsing, then you can make the following modifications and open: editor /filemanager/browser/default/connectors/php/util.php, modify the ConvertToXmlAttribute function, change:

return utf8_encode( htmlspecialchars( $value ) ) ;
to:

return iconv( "GBK", "UTF-8", htmlspecialchars($value) ) ;
In this way, your editor should be able to display the Chinese name correctly. However, it is strongly recommended that you change the name of the uploaded file. The Chinese name may exist Many inconveniences.
After completing the above settings, fckeditor can meet our daily needs, but we found another problem, that is, we cannot delete the uploaded files, which will cause junk files (mainly pictures) on the website ) is increasing day by day, so can we more conveniently manage and delete useless uploaded files by modifying the editor? It is not difficult for us to think of the file browsing function of fckeditor. If we extend this function appropriately, it will become quite simple and easy to manage the files uploaded daily. So let’s do it quickly:
To add this function, we modified it The 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:

Explanation: The function of the first pair of

is to display relevant information when we move the mouse over the uploaded file; the function of the tag is The action response window is used when we delete uploaded files, that is, our deletion action is run in an iframe to achieve a pseudo-no-refresh deletion effect; the last pair of

is used to display the upload List of files and folders (2.4 has adjusted the content in the tag compared to the previous version. The old version of the page uses

as a container to store the list, while the new version Directly generate the display container in js. In order to make the file display div and iframe tags normally used, a pair of

tags are added to the body tag so that they can be used normally. In my While trying, if it seems wrong to modify it otherwise, it certainly does not rule out the reason why my method is inappropriate)

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

Copy the code The code is as follows:

// add by jayliaoscu @ 2007-04-23 /*{{{{*/
// 显示文件显示层
function showDiv( fileUrl )
{
var name = fileUrl;
//获取文件类型
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 += "

关闭

删除

该类型不能预览

";
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;
}
// 隐藏文件显示层
function hiddenDiv()
{
var div= document.getElementById("showFile");
div.style.display ="none";
}
// 在iframe中删除文件
function delFile( fileUrl )
{
if(!confirm('你确定删除该文件？'))
return;
var url = '/fckeditor/del_file.php?filePath='+ fileUrl;
window.open(url, "iframe_del");
Refresh();
}
///*}}}*/

第三步，修改本页面原有js
修改：

复制代码代码如下:

oListManager.Clear = function() 
{ 
document.body.innerHTML = '' ; 
} 

为：

复制代码代码如下:

oListManager.Clear = function() 
{ 
hiddenDiv(); 
document.getElementById("body_content").innerHTML = '' ; // body_content为我们在body区域增加的div标签 
} 

找到：

复制代码代码如下:

var sLink = '' ;

修改为：

复制代码代码如下:

var sLink = '' ; // 即是文件信息显示功能

修改：

复制代码代码如下:

function Refresh() 
{ 
LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ; 
} 

为：

复制代码代码如下:

function Refresh() 
{ 
hiddenDiv(); // 所作修改，为了刷新列表时默认隐藏文件显示层 
LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ; 
} 

修改函数：GetFoldersAndFilesCallBack，找到：

复制代码代码如下:

document.body.innerHTML = oHtml.ToString() ;

Modify 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)), which is used to delete files, given For operation tips on success or failure, refer to the code:

Copy code The code is as follows:

[php]$filePath = "..".trim($_GET['filePath']);
if ( $filePath )
{
@unlink($filePath);
echo "< script>alert('Deletion successful.');";
}
else
{
echo "<script>alert('Deletion error, the file may not exist or Deleted. ');</script>";
}
?>[/php]

At this point, I have basically completed the modifications to fckeditor. Of course, these modifications are just a starting point for modifying fckeditor. They will give you a reference and hope to be helpful to beginners. The modification process of the editor later was relatively hurried, and the document writing was not completed step by step. Therefore, it is inevitable that there will be mistakes. I hope you can forgive me. If you have any questions or errors, please contact me to discuss and make progress together.
Attached:
The main configuration items in the configuration file (fckconfig.js) are as follows, configure 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 of the editing area
3.FCKConfig.BaseHref = ''; // Base address of relative link
4.FCKConfig.Debug = true/false; // Whether to enable debugging, when calling FCKDebug.Output(), it will be displayed in Output content in the debugging window
5.FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // Set the 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, ltr left, rtr right
9.FCKConfig .FillEmptyBlocks = true/false; // Using this function, you can 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 to automatically format the code when outputting content
12.FCKConfig.FormatIndentator = ""; // Used when indenting code under "Source Code Format" Character
13.FCKConfig.GeckoUseSPAN = true/false; // Whether to allow SPAN tags to replace B, I, U tags
14.FCKConfig.StartupFocus = true/false; // Whether to FOCUS to the editor when opening
15.FCKConfig.ForcePasteAsPlainText = true/false;// Force pasting as plain text
16.FCKConfig.ForceSimpleAmpersand = true/false; // Whether to not convert the & symbol into XML entities
17.FCKConfig. TabSpaces = 0/1; // Whether TAB is valid
18.FCKConfig.TabSpaces = 4; // The number of space characters 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 will only appear when you click "Expand Toolbar"
21.FCKConfig.ToolBarCanCollapse = true/false; // Whether it is allowed Expand and collapse the toolbar
22.FCKConfig.ToolbarSets = object; // The editor's toolbar can be customized and deleted. You can refer to the existing toolbar
23.FCKConfig.EnterMode = 'p'; / / Enter directly in the editor, generated in the code, optional p | div | br
24.FCKConfig.ShiftEnterMode = 'br'; // Shift+Enter in the editor, generated in the code, optional for p | div | br
25.FCKConfig.ContextMenu = string array; // Contents of 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 of the CSS style list
31.FCKConfig.TemplatesXmlPath = ""; // The location of the XML file of the templates
32.FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // Spelling Checker
33.FCKConfig.IeSpellDownloadUrl = ""; // URL to download the spell checker
34.FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/'; // Expression file storage path
35.FCKConfig.SmileyImages = ''; // List of emoticon file names, refer to the default settings for details
36.FCKConfig.SmileyColumns = 8; // Number of emoticon columns displayed in the emoticon window
37.FCKConfig.SmileyWindowWidth = 320; // The display width of the emoticon window, this window will be adjusted due to changes in the emoticon file
38.FCKConfig.SmileyWindowHeight = 240; // The display 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 BODY