Yii + CKEditor 實現圖片上傳：無需 CKFinder 的輕量級方案

方案選型

CKEditor 官方配套 CKFinder 功能強大但過於重量級、收費。CKEditor 內建 filebrowserImageUploadUrl 參數，只需實現對應後端接口即可實現圖片上傳、預覽、插入全流程。

前端配置

CKEDITOR.replace('editor1', {
    filebrowserUploadUrl: '/uploader/upload.php',           // 普通文件上傳
    filebrowserImageUploadUrl: '/uploader/upload.php?type=Images' // 圖片上傳
});

後端控制器實現（Yii）

class UploaderController extends Controller {
    /**
     * 圖片上傳入口
     * @param string $type 類型（Images/File/Flash）
     * @param string $CKEditor CKEditor 實例名
     * @param int $CKEditorFuncNum 回調函數編號
     * @param string $langCode 語言代碼
     */
    public function actionImg($type, $CKEditor, $CKEditorFuncNum, $langCode = 'zh-cn') {
        // 參數校驗
        if (empty($CKEditorFuncNum) || $type !== 'Images') {
            $this->mkhtml($CKEditorFuncNum, '', '錯誤的函數調用');
        }

        if (isset($_FILES['upload'])) {
            // 獲取上傳配置（如允許類型、大小限制）
            $options = Options::model()->findByPk(1);
            $form = new UploadForm('image', $options);
            $form->upload = CUploadedFile::getInstanceByName('upload');

            if ($form->validate()) {
                // 生成唯一文件名：時間戳 + 原文件名
                $filename = date('Ymd-His') . '_' . $form->upload->getName();
                $savePath = Yii::app()->basePath . '/../uploads/' . $filename;
                
                if ($form->upload->saveAs($savePath)) {
                    $url = Yii::app()->baseUrl . '/uploads/' . $filename;
                    $this->mkhtml($CKEditorFuncNum, $url, '上傳成功');
                } else {
                    $this->mkhtml($CKEditorFuncNum, '', '文件保存失敗');
                }
            } else {
                $this->mkhtml($CKEditorFuncNum, '', $form->getError('upload'));
            }
        }
    }

    /**
     * 輸出 CKEditor 要求的 JavaScript 回調格式
     * @param int $funcNum 回調函數編號
     * @param string $fileUrl 文件訪問 URL（成功時）
     * @param string $message 提示信息
     */
    private function mkhtml($funcNum, $fileUrl, $message) {
        $script = "";
        
        // 關鍵：直接輸出並結束，不經過 layout
        echo $script;
        Yii::app()->end();
    }
}

表單模型驗證

class UploadForm extends CFormModel {
    public $upload;
    private $options;
    private $type;

    public function __construct($type, $options) {
        $this->type = $type;
        $this->options = $options;
    }

    public function rules() {
        return [
            ['upload', 'file',
                'types' => $this->options->getAttribute("allow_{$this->type}_type"),
                'maxSize' => 1024 * (int)$this->options->getAttribute("allow_{$this->type}_maxsize"),
                'tooLarge' => '文件大小超過限制',
                'wrongType' => '不支持的文件類型',
            ],
        ];
    }
}

關鍵點總結

1. 回調協議：CKEditor 要求返回 ``
2. 參數透傳：前端配置的 `?type=Images` 會作為 `$_GET['type']` 傳給控制器
3. 安全驗證：必須驗證 MIME 類型、文件擴展名、文件大小，防止惡意上傳
4. 文件命名：時間戳 + 隨機字符串 + 原擴展名，避免衝突與安全風險
5. 存儲隔離：上傳目錄設置為不可執行腳本（Nginx/Apache 配置 `location ~ \.php$ { deny all; }`）

擴展：支持多圖片批量上傳

CKEditor 4.5+ 支持 config.filebrowserImageUploadUrl 返回數組格式，可一次上傳多圖。後端需相應調整返回 JSON 格式：

{ "uploaded": 1, "fileName": "foo.jpg", "url": "/uploads/foo.jpg" }