코드 미러 편집기가 클릭할 때까지 콘텐츠를 로드하지 않습니다.

코드 미러 편집기가 클릭할 때까지 콘텐츠를 로드하지 않습니다.

저는 코드 미러 2를 사용하고 있으며, 편집기를 클릭하면 편집기에 설정값이 로드되지 않고 초점이 맞춰지는 것을 제외하고는 잘 작동합니다.

나는 편집자가 클릭할 필요 없이 자신의 내용을 보여주기를 원합니다.무슨 생각 있어요?

코드 미러 데모는 모두 예상대로 작동하기 때문에 텍스트 영역이 초점이 맞지 않는 것 같아서 그것도 시도해 보았습니다.

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

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

codeMirrorRef.setValue(content);
setTimeout(function() {
    codeMirrorRef.refresh();
},1);

저한테는 잘 먹힙니다.여기서 답을 찾았어요.

만일을 대비해서, 그리고 (나처럼) 문서를 충분히 주의 깊게 읽지 않지만, 이것에 비틀거리는 모든 사람들을 위해.그것만을 위한 오토프레시 애던이 있습니다.

추가할 필요가 있습니다.autorefresh.js당신의 파일에.이제 이렇게 사용하시면 됩니다.

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

});

매력적으로 작용합니다.

당신(또는 당신이 로드한 일부 스크립트)이 편집자가 숨기거나 작성할 때 이상한 위치에 있는 방식으로 DOM에 간섭하는 것으로 예상합니다.전화가 필요할 것입니다refresh()그것이 가시화된 후의 방법.

부트스트랩 탭 내에서 코드미러를 사용하게 되었습니다.클릭할 때까지 부트스트랩 탭이 표시되지 않는 것이 아닌가 의심했습니다.그냥 전화해서 고친거에요.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 버전의 코드 미러는 추가 기능을 통해 이 문제를 완전히 해결합니다.자세한 내용은 이 답변을 참조하십시오.

리액트와 함께 일을 하고 있는데, 이 모든 대답들이 저에게는 통하지 않았습니다.설명서를 읽은 후에는 다음과 같이 작동했습니다.

컨스트럭터에서 코드 미러의 인스턴스를 초기화했습니다.

this.mirrorInstance = null;

그리고 코드에디터가 들어있는 탭을 열 때 1밀리초 후에 인스턴스를 새로 고쳤습니다.

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

저는 오늘 저녁에 이 문제에 대한 버전을 우연히 발견했습니다.

다른 많은 게시물들은 텍스트 영역 부모의 가시성을 중요하게 여기는데, 만약 그것이 숨겨져 있다면 당신은 이 문제에 부딪힐 수 있습니다.

제 상황에서는 폼 자체와 주변 환경은 괜찮았지만 렌더링 체인 위에 있는 백본 뷰 매니저가 문제였습니다.

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

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

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

화면에 모든 컨텐츠가 표시된다는 것을 알고 화면을 렌더링하면 보기에서 필요한 작업을 수행할 수 있습니다. 여기서 CodeMirror를 이동했는데 잘 작동했습니다.

이는 또한 팝업과 같은 문제가 발생하는 이유를 설명하는 데도 도움이 될 수 있습니다. 경우에 따라서는 디스플레이 전에 모든 컨텐츠를 구축하려고 할 수도 있습니다.

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

토비

그러나 (편집자가 제대로 작성하려면 편집자가 눈에 띄어야 한다는 사실도 알게 되었습니다) 또 다른 해결책은 시공 중에 일시적으로 본체 요소에 상위 요소를 부착했다가 완료되면 다시 부착하는 것입니다.

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

제 경우에는 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();

<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)

새로 고침을 사용하면 이 문제를 해결할 수 있습니다.하지만 그것은 친근하지 않은 것 같습니다.

이유:

코드미러는 DOM 노드가 보이지 않을 때 DOM 컨텐츠를 업데이트하지 않습니다.

예를 들어,

CodeMirror의 Dom이 'display: none'으로 설정된 경우.

수정 방법:

CodeMirror의 돔이 보이면 수동으로 실행합니다.cm.refresh()방법.

예를 들어, 내 애플리케이션에서 CodeMirror Dom은 탭 요소가 클릭될 때 표시됩니다.

따라서 간단한 방법은 다음과 같습니다.

window.onclick = () => {
    setTimeout(() => {
        codeMirrorRef.refresh();
    }, 10);
};

보다 특정 요소에 이벤트 수신기를 추가하여 성능을 향상시킬 수 있습니다.

이것을 마스터 코드 미러 개체에 연결하고, 다른 개체가 연결되지 않았는지 확인합니다.

.on('change', editor => {
   globalContent = editor.getValue();
});;

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