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, 

}); 

工程就像一个魅力。