Codemirror 편집기는 클릭 할 때까지 콘텐츠를로드하지 않습니다.

Codemirror 편집기는 클릭 할 때까지 콘텐츠를로드하지 않습니다.

---

에디터를 클릭하고 포커스를받을 때까지 에디터의 설정 값이 에디터에로드되지 않는다는 점을 제외하면 codemirror 2를 사용하고 있습니다.

클릭하지 않고도 편집자가 자신의 내용을 보여 주길 원합니다. 어떤 아이디어?

모든 codemirror 데모가 예상대로 작동하므로 텍스트 영역이 초점이 맞지 않을 수도 있다고 생각하여 시도했습니다.

$("#editor").focus();
var editor =    CodeMirror.fromTextArea(document.getElementById("editor"), {
                    mode: "text/html",
                    height: "197px",
                    lineNumbers: true
                });

---

setValue () 후에 refresh ()를 호출해야합니다. 그러나 setTimeout을 사용하여 CodeMirror / Browser가 새 콘텐츠에 따라 레이아웃을 업데이트 한 후 refresh ()를 연기해야합니다.

this.codeMirrorInstance.setValue(content);
var that = this;
setTimeout(function() {
    that.codeMirrorInstance.refresh();
},1);

그것은 나를 위해 잘 작동합니다. 여기 에서 답을 찾았습니다 .

---

나는 당신 (또는 당신이로드 한 일부 스크립트)이 편집기가 숨겨 지거나 생성 될 때 이상한 위치에있는 방식으로 DOM에 간섭하고 있다고 기대합니다. refresh()표시가 된 후에 는 메서드를 호출해야합니다 .

---

혹시나 문서를 충분히주의 깊게 읽지 않은 모든 사람을 위해 (나와 같이)이 문제를 발견합니다. 이를위한 자동 새로 고침 애드온 이 있습니다.

autorefresh.js파일 에 추가 해야합니다. 이제 이렇게 사용할 수 있습니다.

var editor = CodeMirror.fromTextArea(document.getElementById("id_commentsHint"), {
  mode: "javascript",
  autoRefresh:true,
  lineNumbers: false,
  lineWrapping: true,

});

매력처럼 작동합니다.

---

부트 스트랩 탭에서 CodeMirror를 사용하고 있습니다. 나는 부트 스트랩 탭이 클릭 할 때까지 표시되지 않는 것으로 의심했습니다. 나는 단순히 refresh()쇼 에서 메소드를 호출함으로써 이것을 고쳤다 .

var cmInstance = CodeMirror.fromTextArea(document.getElementById('cm'), {
    lineNumbers: true,
    lineWrapping: true,
    indentUnit: 4,
    mode: 'css'
});

// to fix code mirror not showing up until clicked
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function() {
    this.refresh();
}.bind(cmInstance));

---

나를 위해 뭔가 일했습니다.

$(document).ready(function(){
                var editor = CodeMirror.fromTextArea(document.getElementById("code2"), {
                     //lineNumbers: true,
                      readOnly: true,
                      autofocus: true,
                     matchBrackets: true,
                     styleActiveLine: true
                 });
                 setTimeout(function() {
                     editor.refresh();
                    }, 100);

        });

---

5.14.2 버전의 codemirror는 애드온으로이 문제를 완전히 해결합니다. 자세한 내용은 이 답변 을 참조하십시오.

---

또 다른 해결책은 (편집기가 제대로 만들기 위해 표시되어야했기 때문에 깨달았습니다) 구성 중에 부모 요소를 body 요소에 임시로 연결 한 다음 완료되면 다시 연결하는 것입니다.

이렇게하면 요소를 다루거나 편집자가 묻힐 수있는 기존 계층 구조의 가시성에 대해 걱정할 필요가 없습니다.

필자의 경우 processr.com의 경우 여러 개의 중첩 된 코드 편집 요소가 있으며,이 요소는 모두 사용자가 업데이트 할 때 즉석에서 만들어야하므로 다음을 수행합니다.

this.$elements.appendTo('body');
for (var i = 0; i < data.length; i++)
{
    this.addElement(data[i]);
}
this.$elements.appendTo(this.$view);

그것은 훌륭하게 작동하며 지금까지 눈에 띄는 깜박임이나 이와 비슷한 것이 없습니다.

---

jQuery 객체 대신 DOM 요소에 포커스를 호출 해보십시오.

var editor=$( '#editor' );
editor[0].focus();
// or
document.getElementById( 'editor' ).focus();

---

나는 오늘 저녁에이 문제의 버전을 직접 만났다.

많은 다른 게시물은 텍스트 영역 부모의 가시성을 중요하게 여기며, 숨겨져 있으면이 문제에 부딪 힐 수 있습니다.

제 상황에서는 형태 자체와 주변 환경은 괜찮 았지만 렌더링 체인의 상위에있는 Backbone 뷰 관리자가 문제였습니다.

내 뷰 요소는 뷰가 완전히 렌더링 될 때까지 DOM에 배치되지 않으므로 DOM에없는 요소는 숨겨진 것으로 간주되거나 처리되지 않은 것으로 간주됩니다.

이를 해결하기 위해 렌더링 후 단계 (의사 코드)를 추가했습니다.

view.render();
$('body').html(view.el);
view.postRender();

postRender에서 뷰는 이제 모든 콘텐츠가 화면에 표시된다는 것을 알고 필요한 작업을 수행 할 수 있습니다. 여기에서 CodeMirror를 이동했고 제대로 작동했습니다.

이것은 또한 어떤 경우에는 표시하기 전에 모든 콘텐츠를 빌드하려고 시도 할 수 있으므로 팝업과 같은 문제가 발생할 수있는 이유를 설명하는 방법 중 하나가 될 수 있습니다.

누군가에게 도움이되기를 바랍니다.

남자 이름

---

<div class="tabbable-line">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#tabXml1" data-toggle="tab" aria-expanded="true">Xml 1</a>
        </li>
        <li class="">
            <a href="#tabXml2" id="xmlTab2Header" data-toggle="tab" aria-expanded="true">Xml 2</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tabXml1">
            <textarea id="txtXml1" />
        </div>
        <div class="tab-pane" id="tabXml2">
            <textarea id="txtXml2" />
        </div>
    </div>
</div>

<link rel="stylesheet" href="~/Content/codemirror.min.css">
<style type="text/css">
    .CodeMirror {
        border: 1px solid #eee;
        max-width: 100%;
        height: 400px;
    }
</style>

<script src="~/Scripts/codemirror.min.js"></script>
<script src="~/Scripts/codemirror.xml.min.js"></script>
<script>
        $(document).ready(function () {
            var cmXml1;
            var cmXml2;
            cmXml1 = CodeMirror.fromTextArea(document.getElementById("txtXml1"), {
                mode: "xml",
                lineNumbers: true
            });
            cmXml2 = CodeMirror.fromTextArea(document.getElementById("txtXml2"), {
                mode: "xml",
                lineNumbers: true
            });
            // Refresh code mirror element when tab header is clicked.
            $("#xmlTab2Header").click(function () {
                setTimeout(function () {
                    cmXml2.refresh();
                }, 10);
            });
        });
</script>

---

뭔가 효과가 있었어! :)

      var sh = setInterval(function() {
       agentConfigEditor.refresh();
      }, 500); 

      setTimeout(function(){
        clearInterval(sh);  
      },2000)

---

나는 반응으로 작업하고 있으며 이러한 모든 답변이 저와 함께 작동하지 않았습니다 ... 문서를 읽은 후 다음과 같이 작동했습니다.

생성자에서 Mirror 코드의 인스턴스를 초기화했습니다.

this.mirrorInstance = null;

codeEditor가 포함 된 탭을 열 때 1 millisecocnd 후에 인스턴스를 새로 고쳤습니다.

toggleSubTab() {
    setTimeout(() => {
      this.mirrorInstance.refresh();
    }, 1);
  }

다음은 JSX 코드입니다.

<CodeMirror
           value={this.state.codeEditor}
           options={{
           mode: "htmlmixed",
           theme: "default",
           lineNumbers: true,
           lineWrapping: true,
           autoRefresh: true
           }}
           editorDidMount={editor => {
           this.mirrorInstance = editor;
           }}
        />

---

새로 고침 도움말을 사용하여이 문제를 해결하십시오. 하지만 우호적이지 않은 것 같습니다

참고 URL : https://stackoverflow.com/questions/8349571/codemirror-editor-is-not-loading-content-until-clicked