여러 CodemIrror 편집기 인스턴스를 올바르게 초기화하고 표시하는 방법

이 튜토리얼은 Codemirror를 사용할 때 여러 텍스트 영역을 반복 할 때 발생하는 일반적인 문제를 해결하도록 설계되었습니다. 많은 개발자가 실수로 루프 내의 모든 요소를 ​​선택하고 첫 번째 요소에서만 작동하여 첫 번째 CodeMirror 인스턴스 만 올바르게 구성됩니다. 이 기사에서는이 오류의 원인을 자세히 설명하고 지정된 모든 텍스트 영역이 독립형 코데 미러 편집기로 올바르게 변환되도록 간단하고 효율적인 솔루션을 제공합니다.

Codemirror는 강력한 브라우저 내 코드 편집기로 코드 강조 표시, 줄 번호, 구문 검사 및 기타 기능이 필요한 시나리오에서 널리 사용됩니다. 많은 응용 프로그램에서는 같은 페이지에 여러 독립적 인 Codemirror 편집기 인스턴스 (예 : 문서에 여러 코드 예제를 표시하거나 양식에 여러 편집 가능한 코드 블록을 제공해야 할 수도 있습니다. 이러한 인스턴스를 올바르게 초기화하는 것은 기능이 올바르게 작동하는지 확인하는 데 중요합니다.

일반적인 초기화 트랩 및 원인 분석

CodeMirror 인스턴스와 같은 특정 클래스로 페이지의 모든 텍스토리 요소를 초기화하려고 할 때 개발자는 종종 문제가 발생합니다. 코드는 모든 요소를 ​​가로 지르는 것처럼 보이지만 결국 첫 번째 Textarea 만 성공적으로 변환됩니다. 이는 일반적으로 JavaScript 루프 및 DOM 요소 선택기를 이해하는 편견에서 비롯됩니다.

다음과 같은 일반적인 오류 구현 중 하나를 고려하십시오.

 Window.onload = function () {
    document.queryselectorall ( ". Codemirror-textArea"). foreach (el => {
        // 오류 : 모든 요소가 여기에서 다시 검색되고 첫 번째 const [output] = docum
        const editor = codemirror.fromTextArea (output, {linenumbers : true, Readonly : true});
    });
}

이 코드의 의도는 Codemirror-TextArea 클래스와 모든 Textarea 요소를 반복하고 별도로 CodemIrror를 초기화하는 것입니다. 그러나 핵심 문제는 Foreach Loop : const [output] = docum

1. 반복 쿼리 : Foreach loop의 각 반복에서 문서, QuerySelectorAll ( ". Codemirror-textArea")은 다시 집행하여 페이지의 모든 일치하는 요소로 구성된 노드리스트를 반환합니다.
2. 항상 첫 번째를 선택하십시오. const [output] = ...은 배열 해체 할당입니다. QuerySelectorAll이 반환 한 NODELIST에서 출력의 첫 번째 요소 만 추출하고 할당합니다.
3. 루프 변수는 사용되지 않습니다. 이것은 codemirror.fromTextArea (output, ...)가 항상 각 루프의 페이지의 첫 번째 .codemirror-textArea 요소에 항상 작동하는 반면 루프 변수 EL (현재 반복을 나타내는 요소)은 완전히 무시됩니다.

따라서 페이지에 Codemirror-TextArea 요소가 얼마나 많은지에 관계 없이이 코드는 첫 번째 요소에서 Codemirror 반복 초기화 작업을 수행하려고 시도합니다 (실제로는 처음으로 만 성공할 수 있으며, 후속 작업은 실제 효과가 없거나 불필요한 오버 헤드를 유발할 수 있음) 다른 요소는 동일하게 유지됩니다.

여러 CodemIrror 인스턴스를 올바르게 초기화합니다

위의 문제를 해결하기위한 핵심은 Foreach 루프 내부에서 DOM을 다시 쿼리하고 첫 번째 요소를 선택하는 대신 루프가 제공하는 현재 요소 변수를 직접 사용해야한다는 것입니다.

이를 구현하는 올바른 방법은 다음과 같습니다.

 Window.onload = function (e) {
    // codemirror 문서로 변환 해야하는 모든 TextRea 요소를 가져옵니다.
        // 수정 : 현재 루프에 의해 직접 반복되는 요소 'el'을 사용하십시오.
        const editor = codemirror.fromtextArea (el, {linenumbers : true, readonly : true});
        // 각 편집기 인스턴스를 추가로 구성하거나 작동 할 수 있습니다.
    });
}

이 수정 된 코드에서 :

• oc
• foreach (el => {...})는이 노델리스트를 가로 지르며 각 반복에서 EL 변수는 현재 처리중인 TextRea 요소를 나타냅니다.
• Codemirror.fromTextArea (el, {...})는 현재 EL 요소를 CodemIRROR 편집기로 직접 변환하여 각 일치하는 텍스트 주변을 올바르게 초기화 할 수 있도록합니다.

메모 및 모범 사례

1. DOM 로딩 시간 : DOM이 완전히로드 된 후 CodemIrror 인스턴스 초기화를 시도하십시오. Window.onload 또는 Document.AdDeventListener ( 'domContentLoaded', ...) 사용은 일반적인 관행입니다. Window.onload는 모든 리소스 (그림, 스타일 시트 등 포함)를 기다릴 때까지 대기하며 DOMContentloaded는 DOM 구조가 준비되면 일반적으로 더 빠릅니다.
2. 요소 선택기 정확도 : .Codemirror-TextArea 또는 TextRea [Data-editor]와 같은 정확한 CSS 선택기를 사용하여 예기치 않게 다른 텍스트의 영향을 피하기 위해 초기화 해야하는 요소를 찾습니다.
3. 구성 옵션 : codemirror.fromTextArea ()의 두 번째 매개 변수는 구성 객체로, 모드 (언어 모드), readonly (읽기 전용 모드) 등과 같은 요구에 따라 각 편집기 인스턴스에 대해 다른 옵션을 설정할 수 있습니다.
4. 동적으로 추가 : 페이지의 Codemirror 요소가 JavaScript를 통해 동적으로 추가 된 경우 요소를 추가 한 후 새로 추가 된 요소에 대한 Codemirror 인스턴스를 만들려면 초기화 로직을 다시 실행해야합니다.
5. 성능 고려 사항 : 페이지에 많은 수의 CodeMirror 인스턴스가있는 상황의 경우 페이지로드 및 런타임 성능에 미치는 영향을 고려해야합니다. 편집자 수를 합리적으로 계획하거나 필요할 때 게으른로드와 같은 최적화 전략을 사용하십시오.

요약

여러 CodeMirror 인스턴스를 올바르게 초기화하는 핵심은 JavaScript 루프 및 DOM 작업의 메커니즘을 이해하는 것입니다. 루프 내부의 반복 쿼리를 피하고 첫 번째 요소를 실수로 선택하지만 Foreach 루프가 제공하는 현재 요소 참조를 직접 사용합니다. 이러한 모범 사례에 따라 응용 프로그램의 모든 CodeMirror 편집기가 예상대로 작동하여 일관되고 효율적인 사용자 경험을 제공합니다. 이 기사의 지침을 통해 프로젝트에서 여러 Codemirror 인스턴스를 자신있게 통합하고 관리 할 수 ​​있어야합니다.

위 내용은 여러 CodemIrror 편집기 인스턴스를 올바르게 초기화하고 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!