How to display multiple CodeMirror correctly?

user_17254782 0
Viewed 42

This code re-adds information only to the first block:

window.onload = function() {
document.querySelectorAll(".codemirror-textarea").forEach(el => {
    const [output] = document.querySelectorAll(".codemirror-textarea");
    const editor = CodeMirror.fromTextArea(output, {lineNumbers: true, readOnly: true});
});}
html javascript
2 Answers

You are looping over the elements, but applies CodeMirror to the first element each time, use el in your loop.

window.onload = function(e) {
    document.querySelectorAll(".codemirror-textarea").forEach(el => {
        const editor = CodeMirror.fromTextArea(el, {lineNumbers: true, readOnly: true});
    });
}
user_33051330

Another way:

window.onload = function() {
Array.from(document.querySelectorAll(".codemirror-textarea")).forEach(el => {
    CodeMirror.fromTextArea(el, {lineNumbers: true, readOnly: true});
});}
user_172547820
Related