擴充 FCKeditor 圖片上傳功能：自訂上傳頁面、檔案管理、刪除與重用

痛點：原生上傳功能缺乏檔案管理，寫部落格插圖極不便

FCKeditor 內建圖片上傳僅支援「上傳→回傳 URL」，無法瀏覽/刪除/重用已上傳檔案，導致寫文時必須「上傳→記住路徑→手工輸入 URL」，體驗極差。

FCKeditor 圖片上傳流程分析

1. 使用者點擊工具列「圖片」按鈕 → 開啟 dialog/fck_image.html。
2. 對話框內表單 POST 至伺服器上傳頁面（action 屬性）。
3. 伺服器頁面處理上傳，回傳 JavaScript 呼叫 window.parent.OnUploadCompleted(url)。
4. 編輯器插入 <img src="url">。

關鍵設定點：fckconfig.js

FCKConfig.ImageUploadURL = "/CustomUpload/ImageUpload.aspx"; // 自訂上傳頁面

修改此值即可導向自製上傳頁面，完全掌控上傳邏輯。

動作觸發機制：fck_image.js

window.onload = function() {
    document.forms[0].action = FCKConfig.ImageUploadURL; // 執行期覆寫 action
};

對話框載入時讀取設定並套用至表單，故只需改設定檔，無需動編輯器原始碼。

自訂上傳頁面實作要點

1. 接收檔案並儲存

// ImageUpload.aspx.cs
protected void Page_Load(object sender, EventArgs e) {
    if (Request.Files.Count > 0) {
        HttpPostedFile file = Request.Files[0];
        string savePath = Server.MapPath("~/Uploads/Images/");
        string fileName = Guid.NewGuid() + Path.GetExtension(file.FileName);
        file.SaveAs(Path.Combine(savePath, fileName));
        string url = "/Uploads/Images/" + fileName;

        // 回傳 JS 通知編輯器
        Response.ContentType = "text/html";
        Response.Write("");
        Response.End();
    }
}

2. 整合檔案管理（瀏覽/刪除/插入既有圖片）

• 建立 FileManager.aspx：列出 ~/Uploads/Images/ 所有圖片，支援縮圖預覽、勾選刪除、雙擊插入。
• 修改 fck_image.html：加入「瀏覽伺服器」按鈕，彈出 FileManager.aspx（window.open 或 showModalDialog）。
• FileManager.aspx 選取圖片後呼叫 window.opener.SetUrl(url) 回填編輯器對話框 URL 欄位。

安全性與擴充建議

• 驗證副檔名/MIME（僅允許 jpg/png/gif）。
• 限制單檔大小（web.config httpRuntime maxRequestLength）。
• 上傳目錄設定「執行權限：無」，防止腳本執行。
• 記錄上傳日誌（使用者、時間、檔名、IP）。
• 支援多語系、水印、縮圖自動產生。

成果展示

透過修改設定檔與自製上傳/管理頁面，FCKeditor 瞬間擁有專業級圖片管理能力，大幅提升內容編輯效率。