KindEditor 上傳圖片報錯「Unexpected token <」？一行代碼解決編碼不匹配

使用 KindEditor 富文本編輯器上傳圖片時，控制台噴紅 Uncaught SyntaxError: Unexpected token <，乍看像 JS 語法錯誤，實則是經典的回傳資料格式與預期不符導致。本文直擊痛點，教你快速定位並修復。

錯誤現場還原

初始化代碼片段：

KindEditor.ready(function (K) {
    var options = {
        uploadJson: '__ROOT__/js/kindeditor/upload_json.php',
        fileManagerJson: '__ROOT__/js/kindeditor/file_manager_json.php',
        // ... 其他配置
    };
    var zh_edit = K.create('#content', options);
});

控制台錯誤指向 zh-CN.js:1，提示 Unexpected token <。

核心原因：語言包檔案名大小寫不一致

KindEditor 官方 Demo 代碼中引用語言包寫法為：

langType: 'zh_CN'

但實際伺服器上的檔案名為 zh-CN.js（中劃線、大小寫不同）。

Linux 伺服器區分大小寫，導致請求 404，回傳 HTML 錯誤頁面（以 < 開頭），瀏覽器嘗試當 JS 解析，拋出語法錯誤。

一鍵修復方案

1. 檢查 kindeditor/lang/ 目錄下實際檔案名（通常為 zh-CN.js）。
2. 修改初始化配置，精確匹配檔案名：

var options = {
    langType: 'zh-CN',  // 改這裡，與實體檔案名一致
    // ...
};

或直接重命名檔案為 zh_CN.js（需同步修改所有引用）。

避坑清單

• 永遠驗證靜態資源實際檔名，不要盲目複製 Demo 代碼。
• 上線前跑一次 npm run build 或手動檢查 Network 面板，確保所有 JS/CSS 狀態碼 200。
• 後端上傳介面 upload_json.php 必須回傳標準 JSON：{"error":0,"url":"..."}，不能有 BOM 頭、多餘空白或 HTML。

延伸：KindEditor 2024 年還值得用嗎？

KindEditor 早已停止維護（最後更新 2016 年），新專案建議考慮：

• WangEditor：國產、輕量、文檔友好、活躍維護。
• TinyMCE：企業級、功能強大、需授權。
• Quill / TipTap：現代架構、支援協同編輯、生態豐富。

舊專案維護期間，修正檔名大小寫即可止血；技術選型時，請拥抱現代編輯器生態。