探討fckeditor在Php中的配置詳解

更新時(shí)間：2013年06月08日 09:58:01 投稿：jingxian

本篇文章是對(duì)fckeditor在Php中的配置進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下

前言：
　　FCKeidtor是個(gè)國(guó)外的多語言編輯器，你可以對(duì)其配置文件進(jìn)行簡(jiǎn)單修改使之支持目前常用Web開發(fā)語言的應(yīng)用，下面我就講講FCKeditor的最新版本2.4.2在php的具體配置過程，有不足和出錯(cuò)的地方，歡迎指正。

精簡(jiǎn)：
　　正因?yàn)檫@個(gè)編輯器是支持多語言的，所以首先我們針對(duì)使用對(duì)其做相應(yīng)的冗余文件刪除。

1、臨時(shí)文件及文件夾刪除：從根目錄下開始刪除一切以“_”開頭的文件及文件夾，因?yàn)樗麄優(yōu)榕R時(shí)文件和文件夾。刪除這類臨時(shí)文件及文件夾之后，我們還要?jiǎng)h除一些根目錄下的多余文件，根目錄下我們只保留fckconfig.js（配置文件）、fckeditor.js（js方式調(diào)用文件）、fckeditor.php（php方式調(diào)用文件，新版本通過該文件統(tǒng)一調(diào)用php4或者php5的調(diào)用文件，fckeditor_php4.php/fckeditor_php5.php你可以根據(jù)自己服務(wù)器使用的情況刪減，建議都保留）、fckeditor_php4.php（php4的調(diào)用文件）、fckeditor_php5.php（php5的調(diào)用文件）、fckstyles.xml（樣式）、fcktemplates.xml（模板）文件和editor文件夾。
2、editor/lang目錄：存放的是多語言配置文件，因?yàn)槲覀冎豢赡苡玫絜n和zh-cn（簡(jiǎn)體中文）所以，根據(jù)我的選擇，我刪掉其他的語言配置文件。
3、editor/skins界面目錄：默認(rèn)帶有三個(gè)界面（default：默認(rèn)界面，加載速度相對(duì)較快；office2003：相對(duì)pp的界面，不過速度確實(shí)要慢些；可以自行決定是否刪除其中一兩個(gè)。
4、editor/filemanager/browser/default/connectors目錄：存放編輯器所支持的Web動(dòng)態(tài)語言，我們以php為例所以保留php目錄，test.html文件可以幫助你查看某語言下的上傳設(shè)置等（具體上傳設(shè)置我將在后面的配置作較為詳細(xì)講解），可以自行決定是否刪除。
5、editor/filemanager/upload目錄：同理。
到此精簡(jiǎn)完成，你會(huì)發(fā)現(xiàn)整個(gè)編輯器確實(shí)“瘦身”不少，呵呵

基本配置：
下面我開始對(duì)編輯器進(jìn)行簡(jiǎn)單配置（并非每步都必須，可根據(jù)自己的需要參考修改）：
1、默認(rèn)語言
打開fckconfig.js文件（注意此文件是utf-8編碼哦），找到FCKConfig.AutoDetectLanguage = true ;（第56行）此句作用為自動(dòng)檢測(cè)語言，默認(rèn)為true，即表示編輯器會(huì)根據(jù)系統(tǒng)語言自動(dòng)檢測(cè)加載相應(yīng)的語言，我們將其改為false，不讓其檢測(cè)，然后將FCKConfig.DefaultLanguage = 'en';（編輯器默認(rèn)語言，第57行）改為簡(jiǎn)體中文"zh-cn"。
2、字體列表
依然打開fckconfig.js，因?yàn)榇司庉嬈鳛橥鈬?guó)人編寫，所以默認(rèn)不提供中文字體，我們?yōu)槠浼尤?，找到FCKConfig.FontNames（第142行）加入“宋體;楷體_GB2312;新宋體;黑體;隸書;幼圓;”其他字體可根據(jù)自己需要自行加入。
3、文件上傳
FCKeditor的文件管理程序在editor/filemanager/文件夾下，分為瀏覽（browser）和上傳（upload）兩種。“瀏覽”是指瀏覽服務(wù)器已存在文件并可以選擇，也可以上傳本地文件至服務(wù)器；上傳是指快速上傳，在窗口中點(diǎn)“上傳”選項(xiàng)，選擇本地文件后上傳就行，但是不能查看服務(wù)器上已有上傳文件，相對(duì)而言不太方便，只是操作更為快捷。也就是說FCKeditor中有一個(gè)文件瀏覽，有兩個(gè)文件上傳，而這些設(shè)置是分散在多個(gè)文件中，配置相對(duì)復(fù)雜，下面我大致講一下：
js文件即是指的fckconfig.js文件，在以前舊版本的fckconfig.js中首先你必需開啟如下幾項(xiàng)：
瀏覽上傳功能：

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

快速上傳功能：

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

即把這幾項(xiàng)設(shè)為true，而我們今天使用的2.4.2的fckconfig.js中默認(rèn)已經(jīng)是開啟上傳開關(guān)顯示功能的，所以，如果你要將該編輯器作為前臺(tái)使用（fckeditor上傳漏洞問題一直沒有得到較好的改善），考慮到安全性你可能需要關(guān)閉文件上傳功能，那么你只需要將這幾項(xiàng)設(shè)置為false即可（當(dāng)然兩個(gè)php文件你也不要開啟上傳功能哦）。
如果你要使用文件上傳功能，那么我們繼續(xù)配置：
依然在fckconfig.js文件中，fckeditor對(duì)語言默認(rèn)支持的是asp，找到以下兩句，進(jìn)行相應(yīng)修改：

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

在2.4.2版本中，我們發(fā)現(xiàn)增加了對(duì)更多文件后綴名的支持，這個(gè)應(yīng)該是為了解決上傳漏洞所作的些許改動(dòng)，不過作用不大。
*.AllowedExtensions：（其中*號(hào)代表：FCKConfig.LinkUpload、FCKConfig.ImageUpload等）表示允許上傳的文件后綴名，為空表示允許所有文件，你可根據(jù)自己需要設(shè)置上傳文件后綴名，一定程度增加安全性，設(shè)置的格式可以參考它已有的后綴名設(shè)置。
*.DeniedExtensions：同上，表示禁止上傳的文件后綴名。
注：你設(shè)置了允許上傳的，當(dāng)然禁止的也就不必要設(shè)置了，本人推薦設(shè)置允許的，畢竟禁止的后綴名列表不能羅列完全，可能還有很多我們不曾想到的后綴名。
對(duì)js文件的配置到此已經(jīng)完成，下面我們進(jìn)行兩個(gè)php文件在上傳方面的設(shè)置：
文件瀏覽上傳修改：
打開editor/filemanager/browser/default/connectors/php/config.php文件，找到：
$Config['Enabled'] = false ;（第28行）將false改為true，即允許上傳。
$Config['UserFilesPath'] = '/userfiles/' ;（第32行）為定義上傳目錄，可根據(jù)自己情況進(jìn)行修改，我將其改為upload目錄。
注：注意FCKeditor是不支持虛擬目錄的，你的所有路徑都是針對(duì)網(wǎng)站根目錄的絕對(duì)路徑。
文件快速上傳修改：
打開文件editor/filemanager/upload/php/config.php文件，找到
$Config['Enabled'] = false ;（第28行）將false改為true。
$Config['UserFilesPath'] = '/UserFiles/' ;（第35行）同“文件瀏覽上傳”的上傳目錄。
$Config['UseFileType'] = false ; （第32行）改為true，不然上傳文件不會(huì)放在上傳目錄中
在該文件中，還有一項(xiàng)：
$Config['UserFilesAbsolutePath'] = '' ;（第41行）
這項(xiàng)的作用是設(shè)定上傳的絕對(duì)路徑，比如，你想指定上傳文件到D:/Web/upload/下，你可以指定它的值為你的絕對(duì)路徑，注意，如果你指定了該值，那你也要對(duì)$Config['UserFilesPath'] = '/UserFiles/' ;作相同的設(shè)置。
到此上傳基本配置已經(jīng)完成，整個(gè)編輯器最基本的配置也已經(jīng)結(jié)束了，你可以通過下列代碼對(duì)其進(jìn)行調(diào)用測(cè)試了：
[php]<?php
include("/fckeditor/fckeditor.php"); // 包含fckeditor類，fckeditor目錄放在網(wǎng)站根目錄下
$BasePath = "/fckeditor/"; // 編輯器路徑
$oFCKeditor = new FCKeditor('jayliao'); // 創(chuàng)建一個(gè)fckeditor對(duì)象，表單的名稱為jayliao
$oFCKeditor->BasePath = $BasePath;
$oFCKeditor->Value = 'test'; // 設(shè)置表單初始值

// 還可設(shè)置以下部分（“=”包含部分），并非必須：
//==================================================================================//
$oFCKeditor->Width = '100%'; // 編輯器寬度，類中有默認(rèn)值，如果不想修改可不管此項(xiàng)
$oFCKeditor->Height= '300'; // 同width，此處為高$oFCKeditor->ToolbarSet
$oFCKeditor->ToolbarSet = 'JayLiao'; // 默認(rèn)編輯器工具欄有Basic（基本工具）和Default（所有工具）兩種選擇，JayLiao為本人自定義的工具條，如有需要可參考后文中的說明新建或修改工具條
$oFCKeditor->Config['SkinPath'] = '/fckeditor/editor/skins/office2003/'; // 設(shè)置編輯器皮膚
//==================================================================================//

$oFCKeditor->Create(); // 調(diào)用類中方法，必須
?>[/php]
我們?yōu)樯蟼魑募詴r(shí)間+隨機(jī)數(shù)作為其新名字，打開：editor/filemanager/upload/php/upload.php，找到：
[php]$sFileName = $oFile['name'] ;[/php]
替換為：
[php]$sFileName = $oFile['name'] ;
$sOriginalFileName = $sFileName ;
$sExtension = substr( $sFileName, ( strrpos($sFileName, '.') + 1 ) ) ;
$sExtension = strtolower( $sExtension ) ;
$sFileName = date("YmdHis").rand(100, 200).".".$sExtension;[/php]
哈哈，你會(huì)發(fā)現(xiàn)“快速上傳”的亂碼已經(jīng)解決，就這么簡(jiǎn)單，高興之余不要忘了，同樣，還需要修改“瀏覽”的上傳，修改文件：editor/filemanager/browser/default/connectors/php/commands.php，修改內(nèi)容同上。
另：你上傳的中文文件不做以上命名修改可能在服務(wù)器上并非亂碼，如果你只是為了在瀏覽的時(shí)候讓編輯器正確顯示該類文件名，那你可以作如下修改，打開：editor/filemanager/browser/default/connectors/php/util.php，修改ConvertToXmlAttribute函數(shù)，將：

return utf8_encode( htmlspecialchars( $value ) ) ;
修改為：

return iconv( "GBK", "UTF-8", htmlspecialchars($value) ) ;
這樣，你的編輯器應(yīng)該已經(jīng)能正確顯示中文名，不過強(qiáng)烈建議你修改上傳文件的命名，中文名可能存在諸多不便。
當(dāng)完成以上設(shè)置后，fckeditor已經(jīng)能滿足我們的日常使用需要，不過我們卻又發(fā)現(xiàn)一個(gè)問題，那就是上傳后的文件我們卻無法刪除，這樣會(huì)使網(wǎng)站上的垃圾文件（主要是圖片）日益增多，那我們是否能夠通過對(duì)編輯器的修改能較為方便的管理刪除無用上傳文件呢？我們不難想到fckeditor的瀏覽文件功能，對(duì)該功能進(jìn)行適當(dāng)?shù)臄U(kuò)展，對(duì)日常所上傳的文件進(jìn)行管理就變得相當(dāng)簡(jiǎn)單易行了，那我們趕緊動(dòng)手吧：
增加該功能我們修改的頁面為：fckeditor/editor/filemanager/browser/default/frmresourceslist.html
第一步，在頁面的body區(qū)域增加如下代碼：

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

說明：第一對(duì)<div></div>的作用是當(dāng)我們把鼠標(biāo)移動(dòng)到所上傳的文件上時(shí)顯示其相關(guān)信息；<iframe></iframe>標(biāo)簽的作用是供我們刪除上傳文件時(shí)做動(dòng)作響應(yīng)窗口的，即是將我們的刪除動(dòng)作在iframe中運(yùn)行，目的是實(shí)現(xiàn)偽無刷新刪除效果；最后一對(duì)<div></div>的作用是顯示上傳文件及文件夾的列表（2.4較以前版本對(duì)<body></body>標(biāo)簽中內(nèi)容作了調(diào)整，老版該頁面以<table></table>作為存放列表的容器，而新版直接將顯示容器在js中生成，為了使文件顯示div和iframe兩組標(biāo)簽正常使用，故在body標(biāo)簽中加入一對(duì)<div></div>標(biāo)簽，使之能正常使用，在我的嘗試中，倘若不這樣修改似乎有錯(cuò)，當(dāng)然不排除我方法不當(dāng)?shù)脑颍?/p>

第二步，在文件的js代碼區(qū)中加入：

復(fù)制代碼代碼如下:

// add by jayliaoscu @ 2007-04-23 /*{{{{*/
// 顯示文件顯示層
function showDiv( fileUrl )
{
var name = fileUrl;
//獲取文件類型
var suffix = name.substring(name.lastIndexOf(".")+1);

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

復(fù)制代碼代碼如下:

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

為：

復(fù)制代碼代碼如下:

oListManager.Clear = function()
{
hiddenDiv();
document.getElementById("body_content").innerHTML = '' ; // body_content為我們?cè)赽ody區(qū)域增加的div標(biāo)簽
}

找到：

復(fù)制代碼代碼如下:

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

修改為：

復(fù)制代碼代碼如下:

var sLink = '<a href="#" onmouseover="showDiv(/'' + fileUrl + '/');" onclick="OpenFile(/'' + fileUrl.replace( /'/g, '///'') + '/');return false;">' ;     // 即是文件信息顯示功能

修改：

復(fù)制代碼代碼如下:

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

為：

復(fù)制代碼代碼如下:

function Refresh()
{
hiddenDiv(); // 所作修改，為了刷新列表時(shí)默認(rèn)隱藏文件顯示層
LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ;
}

修改函數(shù)：GetFoldersAndFilesCallBack，找到：

復(fù)制代碼代碼如下:

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

修改為：

復(fù)制代碼代碼如下:

document.getElementById("body_content").innerHTML = oHtml.ToString() ;

最后，增加一個(gè)文件刪除頁面del_file.php（該文件路徑和增加的js函數(shù)delFile(fileUrl)中的調(diào)用一致），作用為刪除文件，給出成功與否的操作提示，參考代碼：

復(fù)制代碼代碼如下:

[php]<?php
$filePath = "..".trim($_GET['filePath']);
if ( $filePath )
{
@unlink($filePath);
echo "<script>alert('刪除成功。');</script>";
}
else
{
echo "<script>alert('刪除錯(cuò)誤，可能文件不存在或者已經(jīng)刪除。');</script>";
}
?>[/php]

至此，我對(duì)于fckeditor的修改基本完成，當(dāng)然這些修改只是對(duì)fckeditor修改使用的拋磚引玉，給大家一個(gè)參考，希望對(duì)初學(xué)者有所幫助。后面對(duì)編輯器的修改過程比較匆忙，并未修改一步完成一步文檔書寫，所以，難免有所出錯(cuò)，望見諒，如果你有什么問題和錯(cuò)誤發(fā)現(xiàn)歡迎聯(lián)系我互相討論，共同進(jìn)步。
另附：
配置文件（fckconfig.js）中主要配置項(xiàng)目如下，根據(jù)自己看情況配置：

1.FCKConfig.CustomConfigurationsPath = '' ; // 自定義配置文件路徑和名稱
2.FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 編輯區(qū)的樣式表文件
3.FCKConfig.BaseHref = ''; // 相對(duì)鏈接的基地址
4.FCKConfig.Debug = true/false; // 是否開啟調(diào)試功能，當(dāng)調(diào)用FCKDebug.Output()時(shí)，會(huì)在調(diào)試窗中輸出內(nèi)容
5.FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // 設(shè)置皮膚
6.FCKConfig.AutoDetectLanguage = true/false ; // 是否自動(dòng)檢測(cè)語言
7.FCKConfig.DefaultLanguage = 'zh-cn' ; // 設(shè)置默認(rèn)語言
8.FCKConfig.ContentLangDirection = 'ltr/rtr'; // 默認(rèn)文字方向，ltr左，rtr右
9.FCKConfig.FillEmptyBlocks = true/false ; // 使用這個(gè)功能，可以將空的塊級(jí)元素用空格來替代
10.FCKConfig.FormatSource = true/false; // 切換到代碼視圖時(shí)，是否自動(dòng)格式化代碼
11.FCKConfig.FormatOutput = true/false; // 當(dāng)輸出內(nèi)容時(shí)是否自動(dòng)格式化代碼
12.FCKConfig.FormatIndentator = ""; // 當(dāng)在“源碼格式”下縮進(jìn)代碼使用的字符
13.FCKConfig.GeckoUseSPAN = true/false; // 是否允許SPAN標(biāo)記代替B，I，U標(biāo)記
14.FCKConfig.StartupFocus = true/false; // 開啟時(shí)是否FOCUS到編輯器
15.FCKConfig.ForcePasteAsPlainText = true/false;// 強(qiáng)制粘貼為純文本
16.FCKConfig.ForceSimpleAmpersand = true/false; // 是否不把&符號(hào)轉(zhuǎn)換為XML實(shí)體
17.FCKConfig.TabSpaces = 0/1; // TAB是否有效
18.FCKConfig.TabSpaces = 4; // TAB鍵產(chǎn)生的空格字符數(shù)
19.FCKConfig.ShowBorders = true/false; // 是否合并邊框
20.FCKConfig.ToolbarStartExpanded = true/false; // 頁面載入時(shí)，工具欄是否展開，點(diǎn)“展開工具欄”時(shí)才出現(xiàn)
21.FCKConfig.ToolBarCanCollapse = true/false; // 是否允許展開折疊工具欄
22.FCKConfig.ToolbarSets = object ; // 編輯器的工具欄，可以自行定義，刪減，可參考已存在工具欄
23.FCKConfig.EnterMode = 'p'; // 編輯器中直接回車，在代碼中生成，可選為p | div | br
24.FCKConfig.ShiftEnterMode = 'br'; // 編輯器中Shift+回車，在代碼中生成，可選為p | div | br
25.FCKConfig.ContextMenu = 字符串?dāng)?shù)組; // 右鍵菜單的內(nèi)容
26.FCKConfig.FontColors = ""; // 文字顏色列表
27.FCKConfig.FontNames = ""; // 字體列表
28.FCKConfig.FontSizes = ""; // 字號(hào)列表
29.FCKConfig.FontFormats = ""; // 文字格式列表
30.FCKConfig.StylesXmlPath = ""; // CSS樣式列表的XML文件的位置
31.FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置
32.FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼寫檢查器
33.FCKConfig.IeSpellDownloadUrl = ""; // 下載拼寫檢查器的網(wǎng)址
34.FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/'; // 表情文件存放路徑
35.FCKConfig.SmileyImages = ''; // 表情文件名稱列表，具體參考默認(rèn)設(shè)置
36.FCKConfig.SmileyColumns = 8; // 表情窗口顯示表情列數(shù)
37.FCKConfig.SmileyWindowWidth = 320; // 表情窗口顯示寬度，此窗口會(huì)因?yàn)楸砬槲募母淖兌髡{(diào)整
38.FCKConfig.SmileyWindowHeight = 240; // 表情窗口顯示高度，此窗口會(huì)因?yàn)楸砬槲募母淖兌髡{(diào)整
39.FCKConfig.FullPage = true/false; // 是否允許編輯整個(gè)HTML文件，還是僅允許編輯BODY間的內(nèi)容