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

Question 1

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

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

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

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

Question 2

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

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

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

Question 3

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

Question 4

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

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

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

});

매력처럼 작동합니다.

Question 5

부트 스트랩 탭에서 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));

Question 6

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

$(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);

        });

Question 7

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

Question 8

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

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

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

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

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