探討fckeditor在Php中的配置詳解

2020-03-22 18:16:50

字體：大中小

來源：轉載

供稿：網友

前言：
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：默認界面，加載速度相對較快；html' target='_blank'>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 ; //同上即把這幾項設為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] ?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(); // 調用類中方法，必須
? [/php]
趕緊測試一下吧，是不是很激動，終于可以看到這個強大的編輯器了。不過，馬上你會發現在上傳以中文命名的文件時會出現亂碼，這到底是怎么回事呢？呵呵，不怕，下面我們就對其進行簡單修改問題很快就解決的：
我們為上傳文件以時間+隨機數作為其新名字，打開：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]
哈哈，你會發現“快速上傳”的亂碼已經解決，就這么簡單，高興之余不要忘了，同樣，還需要修改“瀏覽”的上傳，修改文件：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" /div
iframe id="iframe_del" name="iframe_del" width="0" height="0" scrolling="no" /iframe
div id="body_content" /div 說明：第一對 div /div 的作用是當我們把鼠標移動到所上傳的文件上時顯示其相關信息； iframe /iframe 標簽的作用是供我們刪除上傳文件時做動作響應窗口的，即是將我們的刪除動作在iframe中運行，目的是實現偽無刷新刪除效果；最后一對 div /div 的作用是顯示上傳文件及文件夾的列表（2.4較以前版本對 body /body 標簽中內容作了調整，老版該頁面以 table /table 作為存放列表的容器，而新版直接將顯示容器在js中生成，為了使文件顯示div和iframe兩組標簽正常使用，故在body標簽中加入一對 div /div 標簽，使之能正常使用，在我的嘗試中，倘若不這樣修改似乎有錯，當然不排除我方法不當的原因）第二步，在文件的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:' font color='#000000' 關閉 /font /a /td td width='53%' align='right' a href='javascript:' font color='#000000' 刪除 /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' /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="#"

修改為：
復制代碼代碼如下:
var sLink = ' a href="#" // 即是文件信息顯示功能

修改：
復制代碼代碼如下:
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] ?php
$filePath = "..".trim($_GET['filePath']);
if ( $filePath )
{
@unlink($filePath);
echo " script alert('刪除成功。'); /script
}
else
{
echo " script alert('刪除錯誤，可能文件不存在或者已經刪除。'); /script
}
? [/php]
至此，我對于fckeditor的修改基本完成，當然這些修改只是對fckeditor修改使用的拋磚引玉，給大家一個參考，希望對初學者有所幫助。后面對編輯器的修改過程比較匆忙，并未修改一步完成一步文檔書寫，所以，難免有所出錯，望見諒，如果你有什么問題和錯誤發現歡迎聯系我互相討論，共同進步。
另附：
配置文件（fckconfig.js）中主要配置項目如下，根據自己看情況配置： 1.FCKConfig.CustomConfigurationsPath = '' ; // 自定義配置文件路徑和名稱
2.FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 編輯區的樣式表文件
3.FCKConfig.BaseHref = ''; // 相對鏈接的基地址
4.FCKConfig.Debug = true/false; // 是否開啟調試功能，當調用FCKDebug.Output()時，會在調試窗中輸出內容
5.FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // 設置皮膚
6.FCKConfig.AutoDetectLanguage = true/false ; // 是否自動檢測語言
7.FCKConfig.DefaultLanguage = 'zh-cn' ; // 設置默認語言
8.FCKConfig.ContentLangDirection = 'ltr/rtr'; // 默認文字方向，ltr左，rtr右
9.FCKConfig.FillEmptyBlocks = true/false ; // 使用這個功能，可以將空的塊級元素用空格來替代
10.FCKConfig.FormatSource = true/false; // 切換到代碼視圖時，是否自動格式化代碼
11.FCKConfig.FormatOutput = true/false; // 當輸出內容時是否自動格式化代碼
12.FCKConfig.FormatIndentator = ""; // 當在“源碼格式”下縮進代碼使用的字符
13.FCKConfig.GeckoUseSPAN = true/false; // 是否允許SPAN標記代替B，I，U標記
14.FCKConfig.StartupFocus = true/false; // 開啟時是否FOCUS到編輯器
15.FCKConfig.ForcePasteAsPlainText = true/false;// 強制粘貼為純文本
16.FCKConfig.ForceSimpleAmpersand = true/false; // 是否不把&符號轉換為XML實體
17.FCKConfig.TabSpaces = 0/1; // TAB是否有效
18.FCKConfig.TabSpaces = 4; // TAB鍵產生的空格字符數
19.FCKConfig.ShowBorders = true/false; // 是否合并邊框
20.FCKConfig.ToolbarStartExpanded = true/false; // 頁面載入時，工具欄是否展開，點“展開工具欄”時才出現
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 = 字符串數組; // 右鍵菜單的內容
26.FCKConfig.FontColors = ""; // 文字顏色列表
27.FCKConfig.FontNames = ""; // 字體列表
28.FCKConfig.FontSizes = ""; // 字號列表
29.FCKConfig.FontFormats = ""; // 文字格式列表
30.FCKConfig.StylesXmlPath = ""; // CSS樣式列表的XML文件的位置
31.FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置
32.FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼寫檢查器
33.FCKConfig.IeSpellDownloadUrl = ""; // 下載拼寫檢查器的網址
34.FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/'; // 表情文件存放路徑
35.FCKConfig.SmileyImages = ''; // 表情文件名稱列表，具體參考默認設置
36.FCKConfig.SmileyColumns = 8; // 表情窗口顯示表情列數
37.FCKConfig.SmileyWindowWidth = 320; // 表情窗口顯示寬度，此窗口會因為表情文件的改變而作調整
38.FCKConfig.SmileyWindowHeight = 240; // 表情窗口顯示高度，此窗口會因為表情文件的改變而作調整
39.FCKConfig.FullPage = true/false; // 是否允許編輯整個HTML文件，還是僅允許編輯BODY間的內容PHP教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：Laravel框架之blade模板新手入門教程

下一篇：phpyii框架web項目連接數據庫以及crud操作