동일한 페이지에 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. 편집자의 코드는 클릭 할 때까지 표시되지 않습니다. 내가하는 일로 그게 효과가 없지. editor.refresh() (setTimeout) 및 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] 
    }); 
} 

"를 클릭 할 때까지 편집기의 코드는 표시되지 않습니다." 구현에 번역 될 것이라고 :

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

가 더 나은 : 그것은 가치가 무엇인지에 대한

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; 
} 

, 나는 또한 일관 초기 & 최대 높이 렌더링을 보장하기 위해 몇 가지 CSS 개조하면 되겠 어를 사용 방법을 통해 모든 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"; 
    } 
    } 

});