JQuery EasyUI Tabs 動態載入 KindEditor 失效：Uncaught ReferenceError 根因與完美解決方案

問題現象

• 主頁面用 EasyUI Tabs
• 點擊 Tab 動態載入包含 KindEditor 的子頁面 (href 模式)
• 子頁面單獨訪問正常，Tab 載入時編輯器報錯：Uncaught ReferenceError: KindEditor is not defined

根因分析

完美解決方案：主頁面統一引入 + Tab load 事件初始化

1. 主頁面引入 KindEditor 資源

<!-- 主頁面 head -->
<link rel="stylesheet" href="/kindeditor/themes/default/default.css" />
<script src="/kindeditor/kindeditor-min.js"></script>
<script src="/kindeditor/lang/zh-CN.js"></script>

2. 子頁面移除 KindEditor 引用，僅保留 textarea

<!-- child.jsp -->
<textarea name="content" id="editor" style="width:100%;height:300px;"></textarea>

3. 主頁面 Tab 初始化邏輯

$('#tabs').tabs({
    onLoad: function(panel, options) {
        // 只在特定 Tab 載入時初始化
        if (options.title === '內容編輯' || options.href.includes('editor')) {
            // 防止重複初始化
            if (window.editorInstance) {
                window.editorInstance.remove();
            }
            window.editorInstance = KindEditor.create('textarea[name="content"]', {
                uploadJson: '/editor/upload_json.jsp',
                allowFileManager: true,
                afterCreate: function() {
                    this.loadPlugin('autoheight');
                }
            });
        }
    },
    onBeforeClose: function(title, index) {
        // 關閉 Tab 時銷毀編輯器，釋放記憶體
        if (window.editorInstance) {
            window.editorInstance.remove();
            window.editorInstance = null;
        }
        return true;
    }
});

關鍵點總結

• ✅ JS/CSS 提升至主頁面：確保 KindEditor 命名空間全域可用
• ✅ onLoad 事件初始化：DOM 就緒後創建實例
• ✅ 單例模式管理：window.editorInstance 防止重複創建
• ✅ onBeforeClose 銷毀：避免記憶體洩漏與殘留事件監聽
• ✅ 子頁面純淨化：僅包含業務 HTML，無 JS 引用

進階：多 Tab 多編輯器管理

const editorMap = new Map(); // tab index → editor instance

onLoad: function(panel, options) {
    const tabIndex = $('#tabs').tabs('getTabIndex', panel);
    if (editorMap.has(tabIndex)) return; // 已初始化

    const editor = KindEditor.create(panel.find('textarea[name="content"]')[0], { ... });
    editorMap.set(tabIndex, editor);
},
onBeforeClose: function(title, index) {
    if (editorMap.has(index)) {
        editorMap.get(index).remove();
        editorMap.delete(index);
    }
    return true;
}

此方案徹底解決動態載入編輯器的生命週期管理問題，生產環境驗證穩定可靠。

1. 上一篇文章： C++ 連接 SQL Server/MySQL/Oracle：ODBC、OLE DB、原生庫三大方案對比與代碼範例
2. 下一篇文章： JSP 模態對話框傳值實現：showModalDialog 父子頁面數據回填完整方案

程式設計綜合問答

C 宏定義能否「重定向」函數？#define f1 f2 實戰解析

問題場景 將他人代碼移植到自己文件，功能相同但函數名不同：

VirtualBox Kali Linux 虛擬機字元間距奇怪該如何調整？

在 VirtualBox 中運行 Kali Linux 虛擬

iOS 固定尺寸加載子視圖並隱藏超出部分：使用 Clip Subviews

問題場景 在主視圖中加載固定尺寸的子視圖，但子視圖內部控件（

jQuery 輪播圖：鼠標懸停暫停、離開繼續自動切換

核心思路 利用 mouseenter / mouseleav