同じページに複数のCodeMirrorテキストエリアのインスタンスがあります

Question

私は就職に関する質問のためのプロジェクトを少し作っており、そのページに回答とコード例を載せています。それぞれはMaterialize.cssの.collapsible div内にあり、クリックすると答えとコードの例が表示されます。

これについてはどのような方法が最適ですか？私はイニシャライザを関数に入れて、すべてのテキストエリアをDOMから取り込み、それらをループしてCodeMirrorテキストエリアに変換しました。

$(document).ready(function(){ 

    var blocks = document.getElementsByClassName('code-block'); 

    function createEditorFrom(selector) { 
    let editor = CodeMirror.fromTextArea(selector, { 
     lineNumbers : false, 
     mode: "swift", 
    }); 
    } 

    for (var x = 0; x < blocks.length; x++) { 
    createEditorFrom(blocks[x]); 
    } 

    // Callback for Collapsible open 
    $('.collapsible').collapsible({ 
    onOpen: function() { 
     // call editor.refresh()? 
    }, 
    }); 

}); 

これは機能しますが、この問題を解決する非常にエレガントな方法ではないように感じます。これを行うより良い方法はありますか？

質問：

1. すべてCodeMirrorのテキストエリアを作成するための良い方法はありますか？
2. 編集者のコードは、クリックするまで表示されません。私はそれを働かせるものは何もありません。 （setTimeoutを指定して）editor.refresh（）を呼び出し、autorefresh：trueを呼び出します。あなたはとにかく行う必要があります

Answer 1

ことの一つは、あなたのCodeMirrorインスタンスへの参照を保っている（例えば。/その値を設定し取得するために）createEditorFormがCodeMirrorインスタンスを返却する必要がありますので、あなたが例のためにそれらをプッシュすることができ&ループ内の配列に：。

function createEditorFrom(selector) { 
    return CodeMirror.fromTextArea(selector, { 
    lineNumbers : false, 
    mode: "swift", 
    }); 
} 

let codeblocks = []; 
for (var x = 0; x < blocks.length; x++) { 
    codeblocks.push({ 
    CM: createEditorFrom(blocks[x]), 
    el: blocks[x] 
    }); 
} 

私は「エディタでコードをクリックするまで表示されません」と私も次の解決策にコメントを書いたに同様の問題が発生しましただろう、あなたの実装に翻訳：

function createEditorFrom(selector) { 
    var instance = CodeMirror.fromTextArea(selector, { 
    lineNumbers : false, 
    mode: "swift", 
    }); 
    // make sure the CodeMirror unit expands by setting a null character 
    instance.setValue('\0'); 
    instance.setValue(''); 
    return instance; 
} 

何が価値があるために、私はまた、一貫性のある初期&のmax-heightレンダリングを保証するために、いくつかのCSSの微調整を使用：

/* CodeMirror */ 
.CodeMirror { height: auto; overflow: auto; max-height: 250px; } 
.CodeMirror-scroll { height: auto; min-height: 24px; } 

が良くありますどのようにCodeMirrorのテキストエリアを作成するのですか？

はい、あなたは怠惰な彼らは、ページの読み込みに表示されません（実際に私はそれが<textarea>の親ノードが表示されている場合にのみ、それらを初期化する方が良いでしょうと信じていた場合CodeMirror場合、私はわからないんだけどにそれらを初期化することができますレンダリング情報が必要です（Element.getBoundingClientRect等）を、例えば唯一の彼らの折りたたみ式の親の彼らにonOpenを読み込む。

Answer 2

私は折りたたみ式が開かれ、それぞれを初期化することになった。これは動作しますが、私は複数あった場合、それは調整する必要があるであろうと思います同じ折り畳み式のCodeMirrorテキストエリア。

また、折りたたみが開かれ、閉じられた後に再度開くと、重複したテキストエリアが作成されるため、別の方法でチェックを追加しました。

$(document).ready(function(){ 

    $('.collapsible').collapsible({ 
    onOpen: createCodeBlock 
    }); 

    function createCodeBlock(target) { 
    var card  = target.context.parentElement.parentElement; 
    var textarea = card.getElementsByClassName('code-block')[0]; 

    // Placeholder class that prevents the duplicate creation of 
    // the same textarea when the collapsible is closed then reopened. 
    if (!textarea.classList.contains("created")) { 
     CodeMirror.fromTextArea(textarea, { 
     lineNumbers: false, 
     mode: "swift", 
     }); 
     textarea.className += "created"; 
    } 
    } 

});