FckEditor配置详解

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

精简：
　　正由于这个编辑器是支持多语言的，因此首先咱们针对使用对其作相应的冗余文件删除。
　　
　　一、临时文件及文件夹删除：从根目录下开始删除一切以“_”开头的文件及文件夹，由于他们为临时文件和文件夹。删除这类临时文件及文件夹以后，咱们还要删除一些根目录下的多余文件，根目录下咱们只保留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文件夹。
　　
　　二、editor\lang目录：存放的是多语言配置文件，由于咱们只可能用到en和zh-cn（简体中文）因此，根据个人选择，我删掉其余的语言配置文件。

　　三、editor\skins界面目录：默认带有三个界面（default：默认界面，加载速度相对较快；office2003：相对pp的界面，不过速度确实要慢些；silver：银白色界面，加载速度也相对较快），能够自行决定是否删除其中一两个。

　　四、editor\filemanager\browser\default\connectors目录：存放编辑器所支持的Web动态语言，咱们以php为例因此保留php目录，test.html文件能够帮助你查看某语言下的上传设置等（具体上传设置我将在后面的配置做较为详细讲解），能够自行决定是否删除。

　　五、editor\filemanager\upload目录：同理。

　　到此精简完成，你会发现整个编辑器确实“瘦身”很多，呵呵

 

基本配置：

　　下面我开始对编辑器进行简单配置（并不是每步都必须，可根据本身的须要参考修改）：

　　一、默认语言
　　打开fckconfig.js文件（注意此文件是utf-8编码哦），找到FCKConfig.AutoDetectLanguage = true ;（第56行）此句做用为自动检测语言，默认为true，即表示编辑器会根据系统语言自动检测加载相应的语言，咱们将其改成false，不让其检测，而后将FCKConfig.DefaultLanguage = 'en';（编辑器默认语言，第57行）改成简体中文"zh-cn"。

　　二、字体列表
　　依然打开fckconfig.js，由于此编辑器为外国人编写，因此默认不提供中文字体，咱们为其加入，找到FCKConfig.FontNames（第142行）加入“宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;”其余字体可根据本身须要自行加入。

　　三、文件上传
　　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 ; //同上

　　即把这几项设为true，而咱们今天使用的2.4.2的fckconfig.js中默认已是开启上传开关显示功能的，因此，若是你要将该编辑器做为前台使用（fckeditor上传漏洞问题一直没有获得较好的改善），考虑到安全性你可能须要关闭文件上传功能，那么你只须要将这几项设置为false便可（固然两个php文件你也不要开启上传功能哦）。

　　若是你要使用文件上传功能，那么咱们继续配置：
　　依然在fckconfig.js文件中，fckeditor对语言默认支持的是asp，找到如下两句，进行相应修改：
　　

var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py（第182行）
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php（第183行）


　　咱们将其均改成'php':
var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py（第182行）
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php

　　在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(); // 调用类中方法，必须
　　?>

　　赶忙测试一下吧，是否是很激动，终于能够看到这个强大的编辑器了，呵呵。不过，立刻你会发如今上传以中文命名的文件时会出现乱码，这究竟是怎么回事呢？呵呵，不怕，下面咱们就对其进行简单修改问题很快就解决的：
　　咱们为上传文件以时间+随机数做为其新名字，打开：editor\filemanager\upload\php\upload.php，找到：
　　$sFileName = $oFile['name'] ;
　　替换为：
　　$sFileName = $oFile['name'] ;
　　$sOriginalFileName = $sFileName ;
　　$sExtension = substr( $sFileName, ( strrpos($sFileName, '.') + 1 ) ) ;
　　$sExtension = strtolower( $sExtension ) ;
　　$sFileName = date("YmdHis").rand(100, 200).".".$sExtension;
　　哈哈，你会发现“快速上传”的乱码已经解决，就这么简单，高兴之余不要忘了，一样，还须要修改“浏览”的上传，修改文件：editor\filemanager\browser\default\connectors\php\commands.php，修改内容同上。

　　另：你上传的中文文件不作以上命名修改可能在服务器上并不是乱码，若是你只是为了在浏览的时候让编辑器正确显示该类文件名，那你能够做以下修改，打开：editor\filemanager\browser\default\connectors\php\util.php，修改ConvertToXmlAttribute函数，将：

return utf8_encode( htmlspecialchars( $value ) ) ;

　　修改成：

return iconv( "GBK", "UTF-8", htmlspecialchars($value) ) ;

　　这样，你的编辑器应该已经能正确显示中文名，不过强烈建议你修改上传文件的命名，中文名可能存在诸多不便。

　　当完成以上设置后，fckeditor已经能知足咱们的平常使用须要，不过咱们却又发现一个问题，那就是上传后的文件咱们却没法删除，这样会使网站上的垃圾文件（主要是图片）日益增多，那咱们是否可以经过对编辑器的修改能较为方便的管理删除无用上传文件呢？咱们不难想到fckeditor的浏览文件功能，对该功能进行适当的扩展，对平常所上传的文件进行管理就变得至关简单易行了，那咱们赶忙动手吧：
　　增长该功能咱们修改的页面为：fckeditor\editor\filemanager\browser\default\frmresourceslist.html

　　第一步，在页面的body区域增长以下代码：
　　

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


　　说明：第一对
的做用是当咱们把鼠标移动到所上传的文件上时显示其相关信息；<iframe></iframe>标签的做用是供咱们删除上传文件时作动做响应窗口的，便是将咱们的删除动做在iframe中运行，目的是实现伪无刷新删除效果；最后一对
的做用是显示上传文件及文件夹的列表（2.4较之前版本对标签中内容做了调整，老版该页面以做为存放列表的容器，而新版直接将显示容器在js中生成，为了使文件显示div和iframe两组标签正常使用，故在body标签中加入一对
标签，使之能正常使用，在个人尝试中，假若不这样修改彷佛有错，固然不排除我方法不当的缘由，呵呵）
　　
　　第二步，在文件的js代码区中加入：
　　

　　// 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 += "<table width='256' border='0' cellpadding='3' cellspacing='1' bgcolor='#737357'><tbody><tr><td height='23' align='left' bgcolor='#C7C78F'><table width='100%' height='100%' border='0' cellpadding='0' cellspacing='0'><tbody><tr><td width='47%'> <a href='javascript:' onClick='hiddenDiv();'><font color='#000000' style='text-decoration:none;'>关闭</font></a></td><td width='53%' align='right'><a href='javascript:' + fileUrl + "\");'><font color='#000000' style='text-decoration:none;'>删除</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'><img src='" + fileUrl + "' onload='if(this.width>250) this.width=250' style='margin:3px;'></td></tr>";
　　　　}
　　　　else
　　　　{
　　　　　　　div.content += "<tr><td height='35' align='center' bgcolor='#C7C78F'><strong>该类型不能预览</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;
　　}
　　// 隐藏文件显示层
　　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 = '<a href="#" + fileUrl.replace( /'/g, '\\\'') + '\');return false;">' ; 　　修改成：var sLink = '<a href="#" + fileUrl + '\');" + fileUrl.replace( /'/g, '\\\'') + '\');return false;">' ; // 便是文件信息显示功能 　　修改：　　　　function Refresh()　　{　　　　LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ;　　} 　　为：　　　　function Refresh()　　{　　　　hiddenDiv(); // 所做修改，为了刷新列表时默认隐藏文件显示层　　　　LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ;　　} 　　修改函数：GetFoldersAndFilesCallBack，找到：　　document.body.innerHTML = oHtml.ToString() ; 　　修改成：　　document.getElementById("body_content").innerHTML = oHtml.ToString() ; 　　最后，增长一个文件删除页面del_file.php（该文件路径和增长的js函数delFile(fileUrl)中的调用一致），做用为删除文件，给出成功与否的操做提示，参考代码：　　<?php　　$filePath = "..".trim($_GET['filePath']);　　if ( $filePath )　　{　　　　@unlink($filePath);　　　　echo "<script>alert('删除成功。');</script>";　　}　　else　　{　　　　echo "<script>alert('删除错误，可能文件不存在或者已经删除。');</script>";　　}　　?>]　　至此，我对于fckeditor的修改基本完成，固然这些修改只是对fckeditor修改使用的抛砖引玉，给你们一个参考，但愿对初学者有所帮助。后面对编辑器的修改过程比较匆忙，并未修改一步完成一步文档书写，因此，不免有所出错，望见谅，若是你有什么问题和错误发现欢迎联系我互相讨论，共同进步，呵呵。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　另附：配置文件（fckconfig.js）中主要配置项目以下，根据本身看状况配置：CODE:　FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 编辑区的样式表文件FCKConfig.BaseHref = ''; // 相对连接的基地址FCKConfig.Debug = true/false; // 是否开启调试功能，当调用FCKDebug.Output()时，会在调试窗中输出内容FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // 设置皮肤FCKConfig.AutoDetectLanguage = true/false ; // 是否自动检测语言FCKConfig.DefaultLanguage = 'zh-cn' ; // 设置默认语言FCKConfig.ContentLangDirection = 'ltr/rtr'; // 默认文字方向，ltr左，rtr右FCKConfig.FillEmptyBlocks = true/false ; // 使用这个功能，能够将空的块级元素用空格来替代FCKConfig.FormatSource = true/false; // 切换到代码视图时，是否自动格式化代码FCKConfig.FormatOutput = true/false; // 当输出内容时是否自动格式化代码FCKConfig.FormatIndentator = ""; // 当在“源码格式”下缩进代码使用的字符FCKConfig.GeckoUseSPAN = true/false; // 是否容许SPAN标记代替B，I，U标记FCKConfig.StartupFocus = true/false; // 开启时是否FOCUS到编辑器FCKConfig.ForcePasteAsPlainText = true/false;// 强制粘贴为纯文本FCKConfig.ForceSimpleAmpersand = true/false; // 是否不把&符号转换为XML实体FCKConfig.TabSpaces = 0/1; // TAB是否有效FCKConfig.TabSpaces = 4; // TAB键产生的空格字符数FCKConfig.ShowBorders = true/false; // 是否合并边框FCKConfig.ToolbarStartExpanded = true/false; // 页面载入时，工具栏是否展开，点“展开工具栏”时才出现FCKConfig.ToolBarCanCollapse = true/false; // 是否容许展开折叠工具栏FCKConfig.ToolbarSets = object ; // 编辑器的工具栏，能够自行定义，删减，可参考已存在工具栏FCKConfig.EnterMode = 'p'; // 编辑器中直接回车，在代码中生成，可选为p | div | brFCKConfig.ShiftEnterMode = 'br'; // 编辑器中Shift+回车，在代码中生成，可选为p | div | brFCKConfig.ContextMenu = 字符串数组; // 右键菜单的内容FCKConfig.FontColors = ""; // 文字颜色列表FCKConfig.FontNames = ""; // 字体列表FCKConfig.FontSizes = ""; // 字号列表FCKConfig.FontFormats = ""; // 文字格式列表FCKConfig.StylesXmlPath = ""; // CSS样式列表的XML文件的位置FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼写检查器FCKConfig.IeSpellDownloadUrl = ""; // 下载拼写检查器的网址FCKConfig.SmileyPath = FCKConfig.BasePath + 'p_w_picpaths/smiley/msn/'; // 表情文件存放路径FCKConfig.SmileyImages = ''; // 表情文件名称列表，具体参考默认设置FCKConfig.SmileyColumns = 8; // 表情窗口显示表情列数FCKConfig.SmileyWindowWidth = 320; // 表情窗口显示宽度，此窗口会由于表情文件的改变而做调整FCKConfig.SmileyWindowHeight = 240; // 表情窗口显示高度，此窗口会由于表情文件的改变而做调整FCKConfig.FullPage = true/false; // 是否容许编辑整个HTML文件，仍是仅容许编辑BODY间的内容