Codemirror編輯器直到點擊後才加載內容

Question

我使用的是codemirror 2及其工作正常，只是編輯器的設置值不會加載到編輯器中，直到我單擊編輯器並且它變得專注。

我希望編輯器顯示其本身的內容，而不必點擊它。有任何想法嗎？

所有的codemirror演示工作如預期，所以我想可能textarea沒有集中，所以我也試過。

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

Answer 1

您必須在setValue（）之後調用refresh（）。但是，你必須使用的setTimeout來刷新（）推遲到以後CodeMirror /瀏覽器已根據新的內容更新的佈局：

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

它很適合我。我在here找到了答案。

Answer 2

試着把焦點放在DOM元素而不是jQuery對象上。

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

Answer 3

我希望你（或你加載一些腳本）與DOM以這樣的方式在創建時編輯器在一個陌生的位置隱藏或以其他方式干預。在它可見後，它需要調用其refresh()方法。

Answer 4

我今天晚上自己就遇到了這個問題的一個版本。

許多其他帖子都將textarea parent的可見性視爲重要的，如果它隱藏，那麼您可能會遇到此問題。

在我的情況下，窗體本身和周圍的環境都很好，但我的Backbone視圖管理器渲染鏈較高，這是問題所在。

我的視圖元素沒有放在DOM上，直到視圖完全呈現自己，所以我猜不在DOM上的元素被認爲是隱藏的或只是沒有處理。

要解決它，我增加了一個後呈現階段（僞）：

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

在postRender視圖可以做它需要知道的所有內容，現在在屏幕上看到，這是哪裏我移動了CodeMirror，它工作正常。

這也可能解釋爲什麼人們可能遇到類似彈出窗口的問題，因爲在某些情況下，他們可能會嘗試在顯示之前構建所有內容。

希望能幫助別人。

Toby

Answer 5

另一個解決方案（我也意識到是因爲編輯器需要可見才能正確創建）是在構造期間臨時將父元素附加到主體元素，然後重新附加一次完成。

這樣，您不需要插入元素，也不用擔心編輯器可能被掩埋的任何現有層次結構中的可見性。

在我的情況下，processr.com，我有多個嵌套代碼編輯元素，所有這些都需要在爲用戶進行更新動態創建的，所以我下面的：

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

它效果很好，而且目前還沒有可見的閃爍或類似的東西。

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

     }); 

Answer 7

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

Answer 8

的東西爲我工作！ :)

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

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

Answer 9

5.14.2版本的codemirror通過附加內容完全解決了這個問題。詳細信息請參見this answer。

Answer 10

我碰巧在引導選項卡中使用了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)); 

Answer 11

以防萬一，併爲大家誰不讀文檔不夠仔細（像我一樣），但絆倒在此。 有一個autorefresh addon只是爲此。

您需要在文件中添加autorefresh.js。 現在你可以像這樣使用它。

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

}); 

工程就像一個魅力。