前言:FCKeditor網頁線上編輯器功能強大好易上手,這個眾所周知了。網站系統整合了FCKeditor編輯器,協助非專業的編程員對HTML網頁進行排版發布新聞文章
提高工作效率之外也使得網頁整體美觀性一致。我進期用PHP編寫一套學校的新聞發布系統,背景編輯器太過簡單,只用簡單的JS匯入串連。功能馬虎了,感覺很彆扭。
於是在網上搜尋下如何整合網站編輯器的教程,發覺很多文章都是轉載來轉載去的。教程所用的版本參差不齊,有的說1.6版本的,有的教2.0版本的,有的是2.1.1版本的。
亂七八糟的版本竟然教程都是一樣的,對初學者很難集中理解。於是我查詢FCKeditor官方網站,官方平台上已經公布了2.3.2最新版本。對比一下之前在網上查詢的教程,都是
介紹久版本的。於是我下載了新版本,(起碼新鮮呀,不至於被他人修改過其中的檔案)。呵呵,OK,接下來就進行出略看看裡面的檔案,進行安裝了。。。
1. 先下載FCKeditor2.3.2
:http://prdownloads.sourceforge.net/f...2.zip?download
2.在自己的PHP伺服器根目錄下隨意建立目錄,我自己建立的是/test/,將下載的檔案解壓到該目錄中。
目錄結構如下:
test 測試的目錄
|
|_____FCKeditor/ 下載FCKeditor解壓後的目錄
|
|_____test.php (建立用來測試的檔案,下附代碼)
|
|_____shop.php (建立用來接收提交資料的顯示檔案頁面,下附代碼)
3.現在FCKeditor已經就緒。只要加入下列代碼產生一個編輯器(一般在<FORM></FORM>中)
test.php檔案簡單代碼如下:
<html>
<head>
</head>
<body>
<form name="form1" action="shop.php" method="post" language="javascript">
<?php
include("FCKeditor/fckeditor.php") ;
$oFCKeditor = new FCKeditor('FCKeditor1') ;
$oFCKeditor->BasePath = './FCKeditor/';
$oFCKeditor->Value = '';
$oFCKeditor->Create() ;
?>
<INPUT type="submit" name="submit" value="提交">
</form>
</body>
</html>
"FCKeditor1" 是表單中的編輯器對應的輸入框名稱. 使用 $sValue = stripslashes( $_POST['FCKeditor1'] ) ; 來接收編輯器中輸入的內容。 "_samples"目錄下有更多的使用範例。
shop.php代碼如下:
<?php
$sValue = stripslashes( $_POST['FCKeditor1'] );
echo"$sValue";
?>
該檔案,只是簡單的測試顯示頁面,相關的插入資料庫的函數,自己根據自己的實際情況添加進去就得了。。
4. 配置上傳和瀏覽功能
開啟fckconfig.js檔案進行簡單的配置
以前舊版本的,很多教程都會說到以下的配置值必須是“true”,現在2.3.2版本的,你會發覺,都已經設定成“true ”值了,那麼這步就省略了。
FCKConfig.LinkBrowser = true ;
FCKConfig.ImageBrowser = true ;
FCKConfig.FlashBrowser = true ;
FCKConfig.LinkUpload = true ;
FCKConfig.ImageUpload = true ;
FCKConfig.FlashUpload = true ;
接著搜尋fckconfig.js檔案中的: var _FileBrowserLanguage (143行)
它的初始設定值是 var _FileBrowserLanguage = 'asp' ;
那麼我是需要PHP版本的,那麼就可以改成var _FileBrowserLanguage ='php'
而且,它適用於 “asp | aspx | cfm | lasso | perl | php | py ” 等等程式設計語言,改回你自己需要的就OK。
它的意思的指向程式類型的設定檔路徑。
再找到144行,var _FileBrowserLanguage ='asp'; 也改成var _FileBrowserLanguage ='PHP';
這裡的意思是修改上傳檔案等設定檔的指向路徑,和上傳組件的路徑。
fckconfig.js配置完畢。。。
5. 然後編輯FCKeditor安裝目錄下的瀏覽程式設定檔和上傳程式設定檔,需要明確指定為true。
開啟檔案 /editor/filemanager/browser/default/connectors/php/config.php
// SECURITY: You must explicitelly enable this "connector". (Set it to "true").
$Config['Enabled'] = true ;
// Path to user files relative to the document root.
$Config['UserFilesPath'] = '/UserFiles/' ;
開啟檔案 /editor/filemanager/upload/php/config.php
// SECURITY: You must explicitelly enable this "uploader".
$Config['Enabled'] = true ;
// Path to uploaded files relative to the document root.
$Config['UserFilesPath'] = '/UserFiles/' ;
這兩個檔案中都有一個目錄配置。為了使上傳的檔案可以被瀏覽,將這兩個目錄都指向/UserFiles/。相應的在網站根目錄建立一個UserFiles目錄。
FCKeditor在瀏覽和上傳的時候會根據檔案類型(Image,File,Flash...)建立和選擇不同的目錄。比如在瀏覽映像時會自動進入/UserFiles/Image/瀏覽目錄。上傳映像時會自動傳入/UserFiles/Image/。
6.好了。。這樣可以上傳檔案了。。仔細測試了好幾次,突然發覺上傳以中文命名的圖片或檔案,會出現檔案名稱亂碼了。應該是在javascript的url編碼傳遞中造成的了,那麼
就想想法辦把它解決。細想還是用最原始的方法,就用上傳時間作為檔案命名。那麼找到上傳的檔案:/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",time()+22800).".".$sExtension;
這樣,就可以解決了上傳檔案時,遇到中文命名的檔案出現亂碼而無法顯示的問題。
還有一點,就是要在伺服器根目錄下建立UserFiles檔案夾,否則上無法上傳檔案,這點很多網上的提問無法上傳檔案的原因。只要在伺服器根目錄下建立UserFiles目錄,程式有目錄指向
就能上傳檔案了。再有的就是該編輯器自動建立了(Image,File,Flash...)等檔案夾在UserFiles中,這是自動檔案分類程式中的作用了,作用是給管理者更好的檔案類型的管理。