複数のCodeMirrorエディターインスタンスを正しく初期化して表示する方法

このチュートリアルは、CodeMirrorを使用する際に複数のテキスト領域をループするときに発生する一般的な問題を解決するように設計されています。多くの開発者は、ループ内のすべての要素を誤って選択し、最初の要素でのみ動作し、最初のCodemirrorインスタンスのみが正しく構成されます。この記事では、このエラーの原因を詳細に説明し、指定されたすべてのテキスト領域がスタンドアロンのコードミラーエディターに正しく変換されるようにするためのシンプルで効率的なソリューションを提供します。

CodeMirrorは、強力なブラウザーコードエディターであり、コードの強調表示、行番号、構文チェック、その他の機能が必要なシナリオで広く使用されています。多くのアプリケーションでは、同じページに複数の独立したCodeMirrorエディターインスタンスを提示する必要がある場合があります。たとえば、ドキュメントに複数のコード例を表示したり、形式で複数の編集可能なコードブロックを提供したりする必要があります。これらのインスタンスを適切に初期化することは、機能が適切に機能するようにするための鍵です。

一般的な初期化トラップと原因の分析

CodeMirrorインスタンスとして特定のクラスを使用して、ページ上のすべてのTextarea要素を初期化しようとすると、開発者は問題に遭遇することがよくあります。コードはすべての要素を通過するように見えますが、最終的には最初のTextareaのみが正常に変換されます。これは通常、JavaScriptループとDOM要素セレクターを理解する際のバイアスに起因します。

次の一般的なエラー実装のいずれかを検討してください。

 window.onload = function（）{
    document.queryselectorall（ "。CodeMirror-Textarea"）。
        //エラー：すべての要素がここで再度検索され、最初のconst [output] = document.queryselectorall（ "。codemirror-textarea"）;
        const editor = codemirror.fromtextarea（output、{linenumbers：true、readonly：true}）;
    }）;
}

このコードの意図は、Codemirror-Textareaクラスを使用してすべてのTextarea要素を反復し、それらのCodemirrorを個別に初期化することです。ただし、コアの問題は、foreachループ内のこの行です。

1. 繰り返しクエリ： foreach loopの各反復で、document.queryselectorall（ "。codemirror-textarea"）が再実行され、ページ上のすべての一致する要素で構成されるノデリストを返します。
2. 常に最初のものを選択します。const [output] = ...は、配列分解の割り当てです。 QuerySeLectorallによって返されたノデリストから出力の最初の要素のみを抽出して割り当てます。
3. ループ変数は使用されません。これにより、codemirror.fromtextarea（output、...）が常に各ループのページ上の最初の.codemirror-textarea要素に作用し、ループ変数EL（現在の反復を表す要素）は完全に無視されます。

したがって、ページ上にCodemirror-Textarea要素の数に関係なく、このコードは最初の要素でCodemirrorの繰り返しの初期化操作を実行しようとするだけです（実際、初めて成功するだけで、その後の操作は実際の効果がないか、不必要なオーバーヘッドを引き起こす可能性があります）、他の要素は同じままです。

複数のCodemirrorインスタンスを正しく初期化します

上記の問題を解決するための鍵は、foreachループ内で、DOMを再度照会して最初の要素を選択するのではなく、ループによって提供される現在の要素変数を直接使用する必要があることです。

実装する正しい方法は次のとおりです。

 window.onload = function（e）{
    // codemirror document.queryselectorall（ "。codemirror-textarea"）に変換する必要があるすべてのtextarea要素を取得します。
        //正しい：現在のループによって直接繰り返される要素「el」を使用する
        const editor = codemirror.fromtextarea（el、{linenumbers：true、readonly：true}）;
        //各エディターインスタンスをこちらでさらに構成または操作できます//例：editor.setValue（ "Hello World！"）;
    }）;
}

この変更されたコードで：

• document.QuerySeLectorall（ "。CodeMirror-Textarea"）は、window.onload関数の開始時に1回のみ実行され、すべてのターゲット要素を取得します。
• foreach（el => {...}）はこのノデリストを通過し、各反復では、EL変数は現在処理中のテキストエレア要素を表します。
• codemirror.fromtextarea（el、{...}）は、現在のEL要素をCodemirrorエディターに直接変換し、各マッチングテキストアレアを正しく初期化できるようにします。

メモとベストプラクティス

1. DOMの読み込み時間： DOMが完全にロードされたら、CodeMirrorインスタンスを初期化してみてください。 window.onloadまたはdocument.addeventlistener（ 'domcontentloaded'、...）を使用することは一般的な慣行です。 window.onloadは、すべてのリソース（写真、スタイルシートなどを含む）がロードするのを待機しますが、DOM構造の準備が整ったときにドンコンテンツロードがトリガーされますが、通常は速くなります。
2. 要素セレクターの精度： .codemirror-textareaやtextarea [data-editor]などの正確なCSSセレクターを使用して、他のテキストに予期せずに影響を避けるために初期化する必要がある要素を見つけます。
3. 構成オプション： codemirror.fromtextarea（）の2番目のパラメーターは、モード（言語モード）、テーマ（テーマ）、readonly（読み取り専用モード）など、ニーズに応じて各エディターインスタンスに異なるオプションを設定できる構成オブジェクトです。
4. 動的に要素を追加する：ページ上のCodemirror要素がJavaScriptを介して動的に追加された場合、要素を追加した後、初期化ロジックを再度実行して、新しく追加された要素のCodeMirrorインスタンスを作成する必要があります。
5. パフォーマンスの考慮事項：ページに多数のCodemirrorインスタンスがある状況では、ページの読み込みとランタイムのパフォーマンスへの影響を考慮する必要があります。編集者の数を合理的に計画するか、必要に応じて怠zyなロードなどの最適化戦略を使用します。

要約します

複数のCodemirrorインスタンスを適切に初期化する鍵は、JavaScriptループとDOM操作のメカニズムを理解することです。ループ内の繰り返しのクエリを避け、最初の要素を誤って選択しますが、foreachループによって提供される現在の要素参照を直接使用します。これらのベストプラクティスに従うことで、アプリケーションのすべてのCodemirrorエディターが期待どおりに機能し、一貫した効率的なユーザーエクスペリエンスを提供します。この記事のガイダンスを通じて、プロジェクトの複数のCodemirrorインスタンスを自信を持って統合および管理できるはずです。

以上が複数のCodeMirrorエディターインスタンスを正しく初期化して表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。