fckeditor配置詳解

前言：
　　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中首先你必需開啓如下幾項：

　　瀏覽上傳功能：
　　

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

　　快速上傳功能：
　　

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

　　即把這幾項設爲true，而我們今天使用的2.4.2的fckconfig.js中默認已經是開啓上傳開關顯示功能的，所以，如果你要將該編輯器作爲前臺使用（fckeditor上傳漏洞問題一直沒有得到較好的改善），考慮到安全性你可能需要關閉文件上傳功能，那麼你只需要將這幾項設置爲false即可（當然兩個php文件你也不要開啓上傳功能哦）。

　　如果你要使用文件上傳功能，那麼我們繼續配置：
　　依然在fckconfig.js文件中，fckeditor對語言默認支持的是asp，找到以下兩句，進行相應修改：
　　

　　我們將其均改爲'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<br />
　　include("/fckeditor/fckeditor.php"); // 包含fckeditor類，fckeditor目錄放在網站根目錄下 <br />
　　$BasePath = "/fckeditor/"; // 編輯器路徑 <br />
　　$oFCKeditor = new FCKeditor('jayliao'); // 創建一個fckeditor對象，表單的名稱爲jayliao<br />
　　$oFCKeditor->BasePath = $BasePath;<br />
　　$oFCKeditor->Value = 'test'; // 設置表單初始值 <br />
　　<br />
　　// 還可設置以下部分（“=”包含部分），並非必須：<br />
　　//==================================================================================//<br />
　　$oFCKeditor->Width = '100%'; // 編輯器寬度，類中有默認值，如果不想修改可不管此項<br />
　　$oFCKeditor->Height= '300'; // 同width，此處爲高$oFCKeditor->ToolbarSet <br />
　　$oFCKeditor->ToolbarSet = 'JayLiao'; // 默認編輯器工具欄有Basic（基本工具）和Default（所有工具）兩種選擇，JayLiao爲本人自定義的工具條，如有需要可參考後文中的說明新建或修改工具條 <br />
　　$oFCKeditor->Config['SkinPath'] = '/fckeditor/editor/skins/office2003/'; // 設置編輯器皮膚<br />
　　//==================================================================================//<br />
　　<br />
　　$oFCKeditor->Create(); // 調用類中方法，必須<br />
　　?>

　　趕緊測試一下吧，是不是很激動，終於可以看到這個強大的編輯器了，呵呵。不過，馬上你會發現在上傳以中文命名的文件時會出現亂碼，這到底是怎麼回事呢？呵呵，不怕，下面我們就對其進行簡單修改問題很快就解決的：
　　我們爲上傳文件以時間+隨機數作爲其新名字，打開：editor/filemanager/upload/php/upload.php，找到：
　　
$sFileName = $oFile['name'] ;

　　替換爲：
　　
　　$sFileName = $oFile['name'] ;<br />
　　$sOriginalFileName = $sFileName ;<br />
　　$sExtension = substr( $sFileName, ( strrpos($sFileName, '.') + 1 ) ) ;<br />
　　$sExtension = strtolower( $sExtension ) ;<br />
　　$sFileName = date("YmdHis").rand(100, 200).".".$sExtension;

　　哈哈，你會發現“快速上傳”的亂碼已經解決，就這麼簡單，高興之餘不要忘了，同樣，還需要修改“瀏覽”的上傳，修改文件：editor/filemanager/browser/default/connectors/php/commands.php，修改內容同上。

　　另：你上傳的中文文件不做以上命名修改可能在服務器上並非亂碼，如果你只是爲了在瀏覽的時候讓編輯器正確顯示該類文件名，那你可以作如下修改，打開：editor/filemanager/browser/default/connectors/php/util.php，修改ConvertToXmlAttribute函數，將：
　　

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

　　修改爲：
　　

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

　　這樣，你的編輯器應該已經能正確顯示中文名，不過強烈建議你修改上傳文件的命名，中文名可能存在諸多不便。

　　當完成以上設置後，fckeditor已經能滿足我們的日常使用需要，不過我們卻又發現一個問題，那就是上傳後的文件我們卻無法刪除，這樣會使網站上的垃圾文件（主要是圖片）日益增多，那我們是否能夠通過對編輯器的修改能較爲方便的管理刪除無用上傳文件呢？我們不難想到fckeditor的瀏覽文件功能，對該功能進行適當的擴展，對日常所上傳的文件進行管理就變得相當簡單易行了，那我們趕緊動手吧：
　　增加該功能我們修改的頁面爲：fckeditor/editor/filemanager/browser/default/frmresourceslist.html

　　第一步，在頁面的body區域增加如下代碼：
　　

CODE:　　<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代碼區中加入：
　　

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

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

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

　　爲：
　　

CODE:　　oListManager.Clear = function()
　　{
　　　　hiddenDiv();
　　　　document.getElementById("body_content").innerHTML = '' ; // body_content爲我們在body區域增加的div標籤
　　}

　　
　　找到：
　　

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

　　修改爲：
　　

CODE:var sLink = '<a href="#" οnmοuseοver="showDiv(/'' + fileUrl + '/');" οnclick="OpenFile(/'' + fileUrl.replace( /'/g, '///'') + '/');return false;">' ; // 即是文件信息顯示功能

　　修改：
　　

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

　　爲：
　　

CODE:　　function Refresh()
　　{
　　　　hiddenDiv(); // 所作修改，爲了刷新列表時默認隱藏文件顯示層
　　　　LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ;
　　}

　　修改函數：GetFoldersAndFilesCallBack，找到：
　　

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

　　修改爲：
　　

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

　　最後，增加一個文件刪除頁面del_file.php（該文件路徑和增加的js函數delFile(fileUrl)中的調用一致），作用爲刪除文件，給出成功與否的操作提示，參考代碼：
　　
　　<?php<br />
　　$filePath = "..".trim($_GET['filePath']);<br />
<br />
　　if ( $filePath )<br />
　　{<br />
　　　　@unlink($filePath);<br />
　　　　echo "<script>alert('刪除成功。');</script>";<br />
　　}<br />
　　else<br />
　　{<br />
　　　　echo "<script>alert('刪除錯誤，可能文件不存在或者已經刪除。');</script>";<br />
　　}<br />
　　?>

　　至此，我對於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 | br
FCKConfig.ShiftEnterMode = 'br'; // 編輯器中Shift+回車，在代碼中生成，可選爲p | div | br
FCKConfig.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 + 'images/smiley/msn/'; // 表情文件存放路徑
FCKConfig.SmileyImages = ''; // 表情文件名稱列表，具體參考默認設置
FCKConfig.SmileyColumns = 8; // 表情窗口顯示錶情列數
FCKConfig.SmileyWindowWidth = 320; // 表情窗口顯示寬度，此窗口會因爲表情文件的改變而作調整
FCKConfig.SmileyWindowHeight = 240; // 表情窗口顯示高度，此窗口會因爲表情文件的改變而作調整
FCKConfig.FullPage = true/false; // 是否允許編輯整個HTML文件，還是僅允許編輯BODY間的內容

fckeditor配置詳解

PDManer [元數建模]-v4.9.0 發佈：一款簡單好用的數據庫建模平臺

使用neovim打造go ide(支持代碼跳轉, 代碼補全, 實時語法檢查)

sql求連續值問題

cs01 CSS Syntax

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

[MASM拾遺]Offset僞指令

h30 HTML Layout Elements

瞭解顯卡

一款基於C#開發的通訊調試工具（支持Modbus RTU、MQTT調試）

Linux/Golang/glibC系統調用

fckeditor配置詳解

ajax筆記(1)

CGI程序工作原理

MY-SQL常用命令

加速PHP動態網站 MySQL索引分析和優化

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結