您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 綜合知識

PHP + Smarty 框架整合 FCKeditor 富文本編輯器完整指南

編輯：PHP 綜合知識

前言

FCKeditor（現更名為 CKEditor）曾是經典的 Web 富文本編輯器。本文記錄其在 PHP + Smarty 模板引擎環境下的整合流程、工具欄定制、路徑配置避坑指南，供維護老項目參考。新項目建議直接使用 CKEditor 4/5。

一、核心整合步驟

1. PHP 端初始化與賦值

<?php
require_once 'Smarty.class.php';
$smarty = new Smarty();

// FCKeditor 核心文件路徑（需與實際目錄一致）
$BasePath = '../include/FCKeditor/';
require_once $BasePath . 'fckeditor.php';

// 建立編輯器實例，參數為表單字段名
$fck = new FCKeditor('p_info'); 
$fck->BasePath    = $BasePath;      // 必須與 include 路徑一致，否則找不到資源文件
$fck->ToolbarSet  = 'News';         // 自定義工具欄名稱（需在 fck_config.js 中定義）
$fck->Width       = '700';
$fck->Height      = '350';
$fck->Config['AutoDetectLanguage'] = false;
$fck->Config['DefaultLanguage']    = 'zh-cn';

// 生成編輯器 HTML 代碼
$content = $fck->CreateHtml();

// 分配給 Smarty 模板
$smarty->assign('content', $content);
$smarty->display('fck.tpl');

2. Smarty 模板輸出

<!-- fck.tpl -->
<tr align="left">
    <td colspan="2" valign="top" bgcolor="#F5F5F5" class="font12en">
        <{$content}>  <!-- 直接輸出編輯器 HTML -->
    </td>
</tr>

3. 表單提交獲取數據

<?php
// 提交後直接通過字段名獲取
$p_info = $_POST['p_info']; // 對應 new FCKeditor('p_info')
// 入庫前建議進行 XSS 過濾（如 HTMLPurifier）

二、工具欄深度定制

1. 配置文件位置

FCKeditor/fck_config.js

2. 定制語法

// 定義名為 "News" 的工具欄
FCKConfig.ToolbarSets["News"] = [
    ['Source', 'DocProps', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteWord', '-', 'Print', 'SpellCheck'],
    ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
    '/', // 換行
    ['Bold', 'Italic', 'Underline', 'StrikeThrough', '-', 'Subscript', 'Superscript'],
    ['OrderedList', 'UnorderedList', '-', 'Outdent', 'Indent', 'Blockquote'],
    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull'],
    ['Link', 'Unlink', 'Anchor'],
    ['Image', 'Flash', 'Table', 'Rule', 'Smiley', 'SpecialChar', 'PageBreak'],
    '/',
    ['Style', 'FontFormat', 'FontName', 'FontSize'],
    ['TextColor', 'BGColor'],
    ['FitWindow', 'ShowBlocks', '-', 'About']
];

3. 關鍵說明

-：分隔符，渲染為垂直分割線。
/：強制換行，開始新的一行工具欄。
按鈕名稱需與 FCKeditor 內建命令一致，可參考官方文檔或 _samples 目錄下示例。
PHP 端設置 $fck->ToolbarSet = 'News'; 即可啟用。

三、常見避坑指南

問題	原因	解決方案
編輯器空白、工具欄不顯示	`BasePath` 路徑錯誤	確保 `$fck->BasePath` 與 `require_once` 路徑一致，以網站根目錄為基準的相對路徑最穩妥
圖片上傳失效	未配置連接器	修改 `fckconfig.js` 中 `FCKConfig.LinkBrowserURL`、`FCKConfig.ImageBrowserURL` 指向服務端上傳處理腳本
提交內容含惡意腳本	未做後端過濾	務必使用 HTMLPurifier 白名單過濾，不要依賴編輯器前端過濾
編碼亂碼	編輯器與頁面編碼不一致	統一使用 UTF-8，確保 `DefaultLanguage`、頁面 `meta charset`、數據庫連接編碼一致

四、精簡部署建議

FCKeditor 目錄較大，部署時可刪除以下無用目錄節省空間：

_test/、_samples/：測試與示例文件
editor/dialog/ 中未用到的對話框語言文件
editor/plugins/ 中未啟用的插件目錄
editor/skins/ 中未使用的皮膚

五、從 FCKeditor 遷移到 CKEditor

FCKeditor 已停止維護，新項目請直接使用 CKEditor 4（成熟穩定）或 CKEditor 5（現代架構）。遷移要點：

CDN 引入：<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
替換初始化代碼：CKEDITOR.replace('p_info');
配置工具欄：config.toolbar = 'News'; 在 config.js 中定義。
Smarty 整合更簡單：直接在模板輸出 <textarea name="p_info" id="p_info"></textarea>，JS 初始化即可。

總結

FCKeditor 在 PHP+Smarty 環境下的整合核心在於：路徑一致性（BasePath）、工具欄定制（fck_config.js）、後端安全過濾（HTMLPurifier）。雖然它是經典之作，但新項目請毫不猶豫選擇 CKEditor 系列，獲得更好的安全性、現代 API 與生態支援。