ThinkPHP KindEditor 編輯器擴展類完整使用指南：安裝、配置、上傳、圖片管理、刪除

ThinkPHP KindEditor 編輯器擴展類完整使用指南

KindEditor 是經典富文本編輯器，ThinkPHP 擴展類 Keditor 封裝了 JS 生成、圖片上傳、遠程圖片瀏覽、圖片刪除等功能。本文整理安裝到進階用法全流程。

一、安裝準備 (三步驟)

1. 核心類庫：將 Keditor.class.php、JSON.class.php 複製至 ThinkPHP/Lib/ORG/Net/
2. 編輯器核心包：將 editor/ 資料夾 (KindEditor 官方完整包) 複製至專案 Public/editor/ (與 index.php 同級)。在 Public/ 下建立 Upload/ 目錄存放上傳圖片
3. 後端處理 Action：將 KeditorAction.class.php 複製至專案 Lib/Action/，內含 upload()、filemanager() 方法

二、基礎調用 (Controller + View)

Controller

<?php
public function edit() {
    import('ORG.Net.Keditor');
    $ke = new Keditor();
    $ke->id = 'content';           // 對應 textarea id
    $keshow = $ke->show();         // 生成 JS 初始化代碼
    $this->assign('keshow', $keshow);
    $this->display();
}
?>

View (模板)

<html>
<head>
    {$keshow}  {# 建議放在 head，輸出 KindEditor JS + 初始化腳本 #}
</head>
<body>
    <form method="post" action="__URL__/save">
        <textarea id="content" name="content" style="width:700px;height:400px;"></textarea>
        <input type="submit" value="提交">
    </form>
</body>
</html>

三、核心屬性配置 (分類說明)

1. 擴展類新增屬性

2. KindEditor 原生屬性 (部分常用)

3. 速捷關鍵字 (擴展類封裝)

• $ke->items = 'little' — 精簡模式工具欄
• $ke->afterCreate = 'ctrlenter' — 啟用 Ctrl+Enter 提交表單 (需同時設 $ke->form = 'your_form_id')

⚠️ 類型注意

數字/布林屬性 不要加引號：$ke->resizeMode = 2; (正確)，$ke->resizeMode = "2"; (錯誤)。字串/陣列/函數需加引號。

四、靜態方法：後端獨立調用

1. 圖片上傳處理 (KeditorAction::upload 內部調用)

import('ORG.Net.Keditor');
Keditor::upload(
    './Public/Upload/',      // 儲存目錄 (相對 index.php)
    '/Public/Upload/',       // 訪問 URL 前綴 (絕對路徑)
    array('gif','jpg','jpeg','png','bmp'),  // 允許類型
    1000000                  // 最大尺寸 (Bytes, 此處 1MB)
);

2. 遠程圖片瀏覽

Keditor::filemanager(
    './Public/Upload/',
    '/Public/Upload/',
    array('gif','jpg','jpeg','png','bmp')
);

3. 刪除圖片 (配合 imgid 隱藏域)

// 刪除文章時同步清理圖片
Keditor::delimg($article['img_field']);  // 傳入存放圖片 URL 的字段值 (逗號分隔)

4. 自定義初始化參數 (show 方法參數)

$ke->show('{id:"content", width:"700px", height:"300px", imgid:"img"}');
// 注意：此方式無法設定 jspath、form、little、ctrlenter 等擴展屬性

五、權限控制擴展

在 KeditorAction.class.php 的 upload()、filemanager() 方法開頭添加：

// 僅允許管理員
if (!session('?admin')) {
    echo json_encode(array('error' => 1, 'message' => '無權限'));
    exit;
}

六、常見問題

• 上傳報錯 "The upload path does not appear to be valid" → savePath 需相對 index.php，確認 Public/Upload/ 存在且可寫
• 中文檔名亂碼 → KindEditor 內部用時間戳重命名，通常不會出現；若出現檢查 PHP mbstring 設定
• 圖片顯示 404 → 檢查 imageUploadJson 返回的 url 是否為正確的絕對路徑 /Public/Upload/xxx.jpg