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間的內容