如何正確初始化並顯示多個 CodeMirror 編輯器實例

本教程旨在解決在使用CodeMirror 時，循環初始化多個文本區域時遇到的常見問題。許多開發者錯誤地在循環內部重複選擇所有元素並僅作用於第一個，導致只有首個CodeMirror 實例被正確配置。本文將詳細解釋此錯誤原因，並提供一個簡潔高效的解決方案，確保所有指定的文本區域都能被正確轉換為獨立的CodeMirror 編輯器。

CodeMirror 是一個功能強大的瀏覽器內代碼編輯器，廣泛用於需要代碼高亮、行號、語法檢查等功能的場景。在許多應用中，我們可能需要在同一個頁面上展示多個獨立的CodeMirror 編輯器實例，例如，在一個文檔中展示多個代碼示例，或者在一個表單中提供多個可編輯的代碼塊。正確地初始化這些實例是確保功能正常運行的關鍵。

常見初始化陷阱與原因分析

當嘗試初始化頁面上所有帶有特定類的textarea 元素為CodeMirror 實例時，開發者常常會遇到一個問題：儘管代碼似乎遍歷了所有元素，但最終只有第一個textarea 被成功轉換。這通常源於對JavaScript 循環和DOM 元素選擇器理解的偏差。

考慮以下一個常見的錯誤實現：

 window.onload = function() {
    document.querySelectorAll(".codemirror-textarea").forEach(el => {
        // 錯誤：這裡再次查詢所有元素，並始終選取第一個const [output] = document.querySelectorAll(".codemirror-textarea");
        const editor = CodeMirror.fromTextArea(output, {lineNumbers: true, readOnly: true});
    });
}

這段代碼的意圖是遍歷所有帶有codemirror-textarea 類的textarea 元素，並為它們分別初始化Code​​Mirror。然而，其核心問題在於forEach 循環內部的這一行：const [output] = document.querySelectorAll(".codemirror-textarea");。

1. 重複查詢：在forEach 循環的每一次迭代中，document.querySelectorAll(".codemirror-textarea") 都會被重新執行，它會再次返回頁面上所有匹配的元素組成的NodeList。
2. 始終選取第一個： const [output] = ... 是一種數組解構賦值，它會從querySelectorAll 返回的NodeList 中，無論該NodeList 有多少個元素，都只提取並賦值給output 第一個元素。
3. 循環變量未被使用：這導致在每次循環中，CodeMirror.fromTextArea(output, ...) 始終作用於頁面上的第一個.codemirror-textarea 元素，而循環變量el（代表當前迭代的元素）則被完全忽略了。

因此，無論頁面上有多少個codemirror-textarea 元素，這段代碼只會嘗試對第一個元素反復進行CodeMirror 的初始化操作（實際上只有第一次會成功，後續操作可能無實際效果或引發不必要的開銷），而其他元素則保持不變。

正確初始化多個CodeMirror 實例

解決上述問題的關鍵在於，在forEach 循環內部，我們應該直接使用循環提供的當前元素變量，而不是再次查詢DOM 並選擇第一個元素。

以下是正確的實現方式：

 window.onload = function(e) {
    // 獲取所有需要轉換為CodeMirror 的textarea 元素document.querySelectorAll(".codemirror-textarea").forEach(el => {
        // 正確：直接使用當前循環迭代的元素'el'
        const editor = CodeMirror.fromTextArea(el, {lineNumbers: true, readOnly: true});
        // 可以在這裡對每個編輯器實例進行進一步配置或操作// 例如：editor.setValue("Hello World!");
    });
}

在這個修正後的代碼中：

• document.querySelectorAll(".codemirror-textarea") 只在window.onload 函數開始時執行一次，獲取所有目標元素。
• forEach(el => { ... }) 遍歷這個NodeList，在每次迭代中，el 變量都代表當前正在處理的textarea 元素。
• CodeMirror.fromTextArea(el, { ... }) 直接將當前的el 元素轉換為CodeMirror 編輯器，確保每個匹配的textarea 都能被正確地初始化。

注意事項與最佳實踐

1. DOM 加載時機：確保在DOM 完全加載後再嘗試初始化CodeMirror 實例。使用window.onload 或document.addEventListener('DOMContentLoaded', ...) 是常見的做法。 window.onload 會等待所有資源（包括圖片、樣式表等）加載完畢，而DOMContentLoaded 則在DOM 結構準備就緒時觸發，通常更快。
2. 元素選擇器的精確性：使用精確的CSS 選擇器（如.codemirror-textarea 或textarea[data-editor]）來定位需要初始化的元素，避免意外影響其他textarea。
3. 配置選項： CodeMirror.fromTextArea() 的第二個參數是一個配置對象，可以根據需要為每個編輯器實例設置不同的選項，例如mode（語言模式）、theme（主題）、readOnly（只讀模式）等。
4. 動態添加元素：如果頁面上的CodeMirror 元素是動態通過JavaScript 添加的，那麼在添加元素之後，你需要再次運行初始化邏輯來為新添加的元素創建CodeMirror 實例。
5. 性能考慮：對於頁面上存在大量CodeMirror 實例的情況，應考慮其對頁面加載和運行時性能的影響。合理規劃編輯器數量，或在必要時採用懶加載等優化策略。

總結

正確初始化多個CodeMirror 實例的關鍵在於理解JavaScript 循環和DOM 操作的機制。避免在循環內部重複查詢並錯誤地選取第一個元素，而是直接利用forEach 循環提供的當前元素引用。遵循這些最佳實踐，可以確保您的應用程序中的所有CodeMirror 編輯器都能按預期工作，提供一致且高效的用戶體驗。通過本文的指導，您應該能夠自信地在項目中集成和管理多個CodeMirror 實例。

以上是如何正確初始化並顯示多個 CodeMirror 編輯器實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！