FCKeditor 整合指南：PHP 與 JavaScript 兩種調用方式完整教學

前言

FCKeditor（現更名為 CKEditor）是經典的網頁富文本編輯器。本文記錄 PHP 後端實例化與前端 JavaScript 直接調用的完整配置參數，適用於舊專案維護或快速原型開發。

一、PHP 後端調用方式

適合在伺服器端動態決定工具列、尺寸、皮膚等配置：

<?php
require_once(PATH_PRE . "fckeditor.php"); // 載入核心類別

$oFCKeditor = new FCKeditor('content');   // 表單欄位名稱
$oFCKeditor->BasePath = "../fckeditor/";  // 編輯器資源目錄（相對或絕對路徑）
$oFCKeditor->ToolbarSet = "Yiyunnet";     // 工具列配置名稱
$oFCKeditor->Height = '100%';
$oFCKeditor->Width  = '100%';
$oFCKeditor->Value  = "";                 // 初始內容

// 選用配置
$oFCKeditor->Config['SkinPath'] = '../editor/skins/silver/'; // 皮膚路徑

$oFCKeditor->Create(); // 輸出編輯器 HTML
?>

常用工具列預設值說明

二、JavaScript 前端直接調用

無需 PHP 參與，適合純前端頁面或 SPA 架構：

方式 1：直接建立實例

<script src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('Content');
oFCKeditor.BasePath = 'fckeditor/';
oFCKeditor.ToolbarSet = 'Basic';
oFCKeditor.Width = '100%';
oFCKeditor.Height = '400';
oFCKeditor.Value = '';
oFCKeditor.Create();
</script>

方式 2：替換現有 textarea（按需載入）

<script src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
function showFCK() {
    var oFCKeditor = new FCKeditor('Content');
    oFCKeditor.BasePath = 'fckeditor/';
    oFCKeditor.ToolbarSet = 'Basic';
    oFCKeditor.Width = '100%';
    oFCKeditor.Height = '200';
    oFCKeditor.Value = '';
    oFCKeditor.ReplaceTextarea(); // 關鍵：替換同名 textarea
    document.getElementById('btnShow').disabled = true;
    document.getElementById('btnShow').style.display = 'none';
}
</script>

<textarea name="Content"></textarea>
<input id="btnShow" type="button" value="載入編輯器" onclick="showFCK()" />

優勢：頁面初載不載入編輯器資源，使用者點擊才初始化，提升首屏速度。

三、關鍵配置參數總覽

四、常見問題與解決

• 圖片上傳失效：需配置 FileBrowserUploadUrl 並確保伺服端有上傳處理腳本（如 PHP connector）。
• 樣式衝突：編輯器 iframe 內部樣式可能受外層 CSS 影響，可用 Config['EditorAreaCSS'] 指定專用 CSS。
• XSS 風險：前端輸出時務必使用 HTML Purifier 等庫過濾，FCKeditor 本身不保証輸出安全。

結語

FCKeditor 雖已停止維護（繼任者為 CKEditor 4/5），但大量舊系統仍在使用。掌握 PHP 與 JS 兩種整合模式，能靈活應對不同架構需求。新專案建議直接採用 CKEditor 5，擁有更現代的架構與更佳的安全性。