作者：唐瑤瑤 / 臺灣大學計算機及資訊網路中心教學研究組
基於好東西要和好朋友分享的觀念，筆者將介紹如何安裝FCKeditor線上編輯器及CKFinder 線上檔案瀏覽器於網頁應用程式中，提供網頁使用者更豐富、便利及輕鬆的方式來編輯內容或貼圖。
前言
五月初接到校內同仁的來電，詢問如何在網頁應用程式中嵌入HTML編輯器？詳問原委後才知該單位網站為委外製作，完成後卻發現沒有線上HTML 編輯器的功能，外包廠商表示需額外付費10萬元方能新增此功能模組。該同仁表示：「希望能如同發行電子報時撰寫內容的方式，嵌入線上編輯HTML信件的工具。」如圖表1所示：
圖表 1：臺大電子報發報平台之撰寫電子報內容工具圖示
基於好東西要和好朋友分享的觀念，筆者將介紹如何安裝FCKeditor線上編輯器及CKFinder 線上檔案瀏覽器於網頁應用程式中，提供網頁使用者更豐富、便利及輕鬆的方式來編輯內容或貼圖。目前有很多大型網站都是使用這套線上編輯器，請參考Who’s using FCKeditor。
預備知識
本文主要介紹PHP版本的安裝，因此需要具備基本PHP程式碼的概念。但這並不表示FCKeditor只支援PHP，事實上，連結到官方網站您可以得到其他所有版本的資訊，如圖表2 所示。
圖表 2：FCKeditor各語言版本及相容之作業系統、瀏覽器
安裝
本文的架站測試環境為Windows XP + WampServer 2(Apache, MySQL, PHP on Windows)，若不修改網頁根目錄，我們以預設值c:\wamp\www 為安裝根目錄。
Step1：接著請下載FCKeditor 2.6 及CKFinder 1.2.2模組，先解壓縮FCKeditor於根目錄c:\wamp\www後，再解壓縮CKFinder 於c:\wamp\www\fckeditor目錄中。現在檢視fckeditor這個目錄，會發現三個子目錄(_samples、ckfinder 及editor)及若干設定檔案，其中最重要的是fckconfig.js，您若需要做進階設定時，可以從這個檔案查詢修改。
Step2：用編輯器打開C:\wamp\www\fckeditor\editor\filemanager\connectors\php\config.php，找到兩行程式碼：
$Config['Enabled'] = false ;
$Config['UserFilesPath'] = '/userfiles/' ;
將 $Config[‘Enabled’] 設定從false 改為true。不過程式開發者在這裡特別提到，當您要正式放入專案時，務必先檢查session 確認是authentic user 才enable它。
第二個參數設定$Config['UserFilesPath']為預設值，表示您必須在根目錄下產生userfiles 這個可讀寫的子目錄，方便使用者上傳檔案。所以現在就請您於c:\wamp\www 目錄下create 子目錄userfiles。
Step3：於根目錄撰寫網頁應用程式myeditor.php及posteddata.php接收post 過來的編輯器內容(下載程式碼)。你也可以將_samples目錄下的PHP範例程式copy 至根目錄改寫，原則上程式碼重點如下：
現在開啟瀏覽器執行myeditor.php，會看到如圖表1的線上HTML 編輯工具，試著編輯一些內容再按submit，應該會成功得到HTML 原始碼及在瀏覽器上之畫面顯示，如圖表3，若在正式專案中就可以將結果儲存於資料庫。
圖表 3：利用FCKeditor編輯內容後所產生的結果
本文不詳細介紹編輯器使用方式，因為與一般編輯器使用法很類似，但請再執行myeditor.php，並試著於內容插入圖片(按下
→瀏覽伺服器端)，結果將如圖表4。這是FCKeditor內建的伺服器端檔案瀏覽器，可以於server端產生子目錄並從local上傳圖檔。
圖表 4：FCKeditor內建之檔案瀏覽器
現在請檢查c:\wamp\www\userfiles 目錄，您會發現FCKeditor預設產生image 子目錄，且image 下也新增了我們剛create的test 子目錄。
測試與修改
到目前為止，一個完整的工具已建立完成，但總覺得好像還有些不夠完美。嗯，原因就出在FCKeditor內建之檔案瀏覽器不支援縮圖，使用者在編輯網頁內容要插入圖檔時無法立即檢視，只能從檔名選擇，有點小小遺憾。沒關係，我們在一開始就下載的CKFinder 即將要派上用場啦。
Step1：首先開啟c:\wamp\www\fckeditor\ckfinder\config.php，找到function CheckAuthentication()，將return false; 改為return true;。如同之前的設定，開發者也要求若在正式專案中，請務必先檢查session，以確保是authentic user 才能使用。
Step2：繼續編輯config.php，檢查 $baseUrl = '/userfiles/'; 確認這個參數的設定與我們原先開放讓使用者上傳檔案的目錄為同一個，若否，請在這裡修改設定。
Step3：開啟c:\wamp\www\myeditor.php，加入下面兩行程式碼：
儲存後開啟瀏覽器執行myeditor.php。現在於編輯器內容中插入圖片(按下→ 瀏覽伺服器端)，將會出現圖表5的檔案瀏覽器CKFinder。
圖表 5：支援縮圖及更多進階功能的CKFinder
將滑鼠指標移於左欄Images folder，按下右鍵即可New subfolder。 Upload 功能則是提供使用者從local 端上傳圖檔至伺服器，預設儲存檔案的位置是c:\wamp\www\userfiles\images。
另外，直接點選縮圖並按下右鍵，即可選擇所有關於此圖的操作，如圖表6。使用起來是不是更加人性化了呢？
圖表 6：CKFinder 中關於瀏覽圖檔的操作
剛剛介紹的只是CKFinder的基本功能，根據官方網站的說法：若專案中有進階的設定要求，例如一般使用者只開放瀏覽及下載功能；管理群組針對特定目錄才開放所有圖檔功能等，都可以在config.php 中針對Access Control 做多重設定。這部份就留待以後測試完成後再寫了。
開放原始碼的好處是不用重複開發一些常用的模組，且通常來說經過全球上千萬開放原始碼開發者撰寫及測試後，在功能上都具有相當的完整性及易用性，可以加速網頁開發者完成專案的時間，當然前提是開發者必須具備debug 及自行擴充修改的能力。最後別忘了回饋，將我們所做的修正及擴充回報，讓各類開放原始碼更加茁壯及健全。
參考資源
1. 本文中測試原始碼(myeditor.php+posteddata.php)
2. FCKeditor、CKFinder官方網站：http://www.fckeditor.net/
3. 臺灣PHP 聯盟：http://twpug.net/