FCKeditor 在 PHP 中完整配置指南：檔案上傳與整合實戰

FCKeditor 簡介

FCKeditor（現已更名為 CKEditor 4）是經典的 Web 富文本編輯器。雖然官方已停止維護，但許多舊專案仍在使用。本文記錄 PHP 環境下的完整配置步驟。

一、修改預設語言為 PHP

編輯 fckconfig.js：

// 原設定
var _FileBrowserLanguage = 'asp';
var _QuickUploadLanguage = 'asp';

// 修改為
var _FileBrowserLanguage = 'php';
var _QuickUploadLanguage = 'php';

二、啟用檔案瀏覽器

編輯 fckeditor/editor/filemanager/connectors/php/config.php：

<?php
// 1. 啟用功能
$Config['Enabled'] = true;

// 2. 設定上傳根目錄（Web 可訪問路徑）
$Config['UserFilesPath'] = '/upload/';  // 如：https://example.com/upload/

// 3. 設定實體儲存路徑（伺服器絕對路徑）
$Config['UserFilesAbsolutePath'] = '/var/www/html/upload/'; // 根據實際環境調整

// 4. 允許的副檔名（可依需求調整）
$Config['AllowedExtensions']['File']    = ['7z', 'pdf', 'doc', 'xls', 'zip'];
$Config['AllowedExtensions']['Image']   = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
$Config['AllowedExtensions']['Flash']   = ['swf', 'flv'];
$Config['AllowedExtensions']['Media']   = ['mpg', 'mpeg', 'avi', 'mp3', 'mp4'];

// 5. 拒絕的副檔名（安全性）
$Config['DeniedExtensions']['File']     = ['php', 'php3', 'phtml', 'asp', 'aspx', 'jsp', 'exe'];
$Config['DeniedExtensions']['Image']    = [];
$Config['DeniedExtensions']['Flash']    = [];
$Config['DeniedExtensions']['Media']    = [];

三、啟用快速上傳

編輯 fckeditor/editor/filemanager/upload/php/config.php：

<?php
$Config['Enabled'] = true;
$Config['UserFilesPath'] = '/upload/';
$Config['UserFilesAbsolutePath'] = '/var/www/html/upload/';

// 同樣設定允許/拒絕副檔名
$Config['AllowedExtensions']['File']    = ['7z', 'pdf', 'doc', 'xls', 'zip'];
$Config['AllowedExtensions']['Image']   = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
$Config['DeniedExtensions']['File']     = ['php', 'php3', 'phtml', 'asp', 'aspx', 'jsp', 'exe'];

四、目錄權限與安全設定

# Linux 環境建立上傳目錄並設定權限
mkdir -p /var/www/html/upload
chown www-data:www-data /var/www/html/upload
chmod 755 /var/www/html/upload

# Nginx/Apache 禁止上傳目錄執行腳本
# Nginx
location /upload/ {
    location ~ \.php$ { deny all; }
}

# Apache (.htaccess)

    Order Allow,Deny
    Deny from all

五、PHP 頁面整合範例

<?php
// 接收編輯器內容
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $content = $_POST['FCKeditor1'] ?? '';
    if ($content !== '') {
        // 此處可存入資料庫
        // $db->insert('articles', ['content' => $content]);
        echo htmlspecialchars($content); // 測試輸出
    }
}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>FCKeditor 測試</title>
</head>
<body>
    <form action="" method="post">
        <?php
        // 1. 載入核心類別
        require_once 'fckeditor/fckeditor.php';

        // 2. 建立編輯器實例
        $oFCKeditor = new FCKeditor('FCKeditor1');
        $oFCKeditor->BasePath = '/fckeditor/'; // 對應 fckconfig.js 路徑
        $oFCKeditor->Value = ''; // 預設內容
        $oFCKeditor->Height = 400;
        $oFCKeditor->Width = '100%';
        $oFCKeditor->ToolbarSet = 'Default'; // 或 'Basic'

        // 3. 輸出編輯器 HTML
        // 若使用模板引擎：$fckHtml = $oFCKeditor->CreateHtml(); 然後指派給模板
        $oFCKeditor->Create();
        ?>
        <br>
        <input type="submit" value="提交內容">
    </form>
</body>
</html>

六、JavaScript 取得編輯器內容

<script>
// 取得純文字
var text = FCKeditorAPI.GetInstance('FCKeditor1').GetXHTML(true);

// 設定內容
FCKeditorAPI.GetInstance('FCKeditor1').SetHTML('<p>新內容</p>');

// 監聽變更
FCKeditorAPI.GetInstance('FCKeditor1').Events.AttachEvent('OnAfterChange', function() {
    console.log('內容已變更');
});
</script>

七、常見問題排查

遷移建議

FCKeditor 已於 2010 年停止更新，存在已知安全漏洞（如 CVE-2011-1759 任意檔案上傳）。強烈建議遷移至 CKEditor 4/5 或 TinyMCE，兩者皆有活躍社群、現代架構與完善的 PHP 整合套件。