KindEditor 上傳影片回傳 undefined 解決方案

現象

KindEditor 4.10/4.17 上傳影片，回調函式收到 undefined，無法插入編輯器。

原因分析

1. 回應格式不符預期：KindEditor 預期 JSON 格式：{error:0, url:"..."}，後端回傳 HTML/純文字/錯誤頁面導致解析失敗。
2. 上傳類型參數錯誤：type=video 參數未正確傳遞，後端按圖片處理。
3. 伺服器端大小限制：Nginx client_max_body_size、Spring multipart.maxFileSize 過小，導致截斷/錯誤。
4. KindEditor 版本 Bug：4.x 版本對影片上傳支援不完善，官方已停止維護。

解決步驟

1. 檢查後端回應 (最關鍵)

// 正確回應範例 (Java Spring)
@PostMapping("/upload")
@ResponseBody
public Map upload(@RequestParam MultipartFile file, @RequestParam String dir) {
    // 儲存檔案...
    return Map.of("error", 0, "url", fileUrl); // JSON
}

用瀏覽器 DevTools Network 面板檢查實際回應內容。

2. 確認前端參數

KindEditor.editor('content', {
    uploadJson: '/upload?dir=video', // 確保傳遞 dir=video
    filePostName: 'file',
    allowFileManager: true,
    afterCreate: function() {
        this.loadPlugin('media'); // 載入媒體外掛
    }
});

3. 替代方案：改用現代編輯器

KindEditor 最後更新 2016 年，**強烈建議遷移**：

• WangEditor (國產、活躍維護、支援影片/圖片/拖拽、TypeScript)。
• Tiptap (Headless、ProseMirror 核心、Vue/React 整合佳)。
• Quill (模組化、輕量、社群大)。
• CKEditor 5 (企業級、功能最全、授權需注意)。

4. 臨時修補 (不想換編輯器)

• 參考 GitHub 專案 laudukang/EditorDemo 對 KindEditor 4.1.10 進行 FLV 影片播放修補。
• 將影片上傳改為**附件模式** (insert file link)，而非內嵌播放器。

核心對策：**檢查後端 JSON 回應格式、確認上傳參數、評估遷移現代編輯器**。