ThinkPHP 整合 UEditor 富文本編輯器完整教學：目錄結構、配置、前後端交互

UEditor（百度富文本編輯器）功能豐富、國產化支援好，是 ThinkPHP 專案常用編輯器。本文從目錄佈局、靜態資源引入、editor_config.js 絕對路徑配置、前端實例化、後端內容過濾與儲存、前端輸出解碼全流程實戰講解。

一、目錄結構佈局

網站根目錄/
├── Public/                 # 靜態資源目錄（對應 __PUBLIC__）
│   └── ueditor/            # UEditor 完整目錄
│       ├── editor_config.js
│       ├── editor_all.js
│       ├── themes/default/ueditor.css
│       └── php/            # 官方 PHP 後端範例（可參考）
├── App/
│   └── Tpl/default/...     # 模板目錄
└── index.php               # 入口文件

二、模板引入靜態資源

<script type="text/javascript" src="__PUBLIC__/ueditor/editor_config.js"></script>
<script type="text/javascript" src="__PUBLIC__/ueditor/editor_all.js"></script>
<link rel="stylesheet" href="__PUBLIC__/ueditor/themes/default/ueditor.css" />

三、關鍵配置：editor_config.js 設定絕對路徑

預設相對路徑在不同深度頁面會失效，強烈建議改為站點絕對路徑：

// 原代碼（約第 20 行）
URL = tmp.substr(0, tmp.lastIndexOf("/")+1).replace("_examples/", "");

// 改為絕對路徑（含域名或相對網站根目錄）
URL = "https://your-domain.com/Public/ueditor/";
// 或
URL = "/Public/ueditor/";

原因：UEditor 內部圖片上傳、彈窗頁面、CSS 載入均依賴 URL 變數，相對路徑在 /Admin/Article/edit/id/5 這類多層級 URL 下會指向錯誤位置。

四、前端實例化表單頁面

<form action="__ROOT__/index.php/Article/save" method="post">
    <script type="text/plain" id="editor" style="width:100%; height:400px;"></script>
    <input type="submit" value="發布" />
</form>

<script type="text/javascript">
var editor = new baidu.editor.ui.Editor({
    toolbars: [[
        'source', '|', 'undo', 'redo', '|',
        'bold', 'italic', 'underline', 'strikethrough', '|',
        'forecolor', 'backcolor', '|',
        'insertimage', 'insertvideo', 'attachment', '|',
        'justifyleft', 'justifycenter', 'justifyright', '|',
        'unorderedlist', 'orderedlist', '|',
        'link', 'unlink', '|',
        'fullscreen', 'preview'
    ]],
    initialContent: '<p style="color:#999">請輸入內容...</p>',
    minFrameHeight: 300,
    autoFloatEnabled: true,
    textarea: 'content'  // 關鍵：表單提交時欄位名
});
editor.render("editor");
</script>

textarea 參數：指定 name="content" 的隱藏表單欄位，提交時自動同步編輯器內容。

五、後端接收與過濾（控制器）

public function save() {
    // 1. 獲取內容並過濾 XSS
    $content = htmlspecialchars(stripslashes($_POST['content']));
    // 或使用 HTMLPurifier 深度過濾
    // $purifier = new HTMLPurifier(); $content = $purifier->purify($_POST['content']);

    // 2. 入庫
    $data = [
        'title'   => I('post.title'),
        'content' => $content,
        'addtime' => time(),
    ];
    M('Article')->add($data);

    $this->success('發布成功', U('index'));
}

六、前端列表頁輸出解碼

// 控制器
$list = M('Article')->select();
$this->assign('list', $list);

<volist name="list" id="vo">
    <div class="article-content">
        {$vo.content|htmlspecialchars_decode}
    </div>
</volist>

原理：入庫前 htmlspecialchars() 將 < > 轉義為實體，輸出時 htmlspecialchars_decode() 還原為 HTML 標籤。ThinkPHP 模板支援 | 管道調用 PHP 函數。

七、常見問題與解決

八、進階：自定義上傳後端

UEditor 官方 php/controller.php 可直接使用，需修改 config.json 指向該控制器。ThinkPHP 專案建議自寫上傳 Action，回傳 UEditor 要求的 JSON 格式：

// UEditor 要求回傳格式
return json_encode([
    'state' => 'SUCCESS',
    'url' => $fileUrl,
    'title' => $fileName,
    'original' => $fileName,
    'type' => $ext,
    'size' => $fileSize,
]);

小結

ThinkPHP 整合 UEditor 關鍵在於：Public 目錄佈局、editor_config.js 絕對路徑、textarea 參數綁定表單欄位、入庫轉義/輸出解碼配對。掌握此流程，可快速在任何 ThinkPHP 專案落地富文本編輯功能。