Codemirror编辑器在单击之前不会加载内容
我正在使用codemirror 2，它的工作正常，只是编辑器的设置值不加载到编辑器，直到我点击编辑器，它变得焦点。
我希望编辑器显示自己的内容，而不必点击它。 有任何想法吗？
所有的代码镜像演示如期工作，所以我想也许textarea没有集中，所以我也试过了。
$("#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);
这对我来说很有用。 我在这里find了答案。
我希望你（或者你加载的一些脚本）干涉DOM，编辑器被隐藏起来或者在创build时处于一个奇怪的位置。 在它变得可见之后，它需要调用它的refresh()方法。
有些东西为我工作。
$(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); });
以防万一，并且对于没有仔细阅读文档的人（像我一样），但是会绊倒这一点。 这里有一个autorefresh插件 。
你需要在你的文件中添加autorefresh.js 。 现在你可以像这样使用它。
var editor =CodeMirror.fromTextArea(document.getElementById("id_commentsHint"), { mode: "javascript", autoRefresh:true, lineNumbers: false, lineWrapping: true, });
奇迹般有效。
我碰巧在引导选项卡中使用了CodeMirror。 我怀疑bootstrap选项卡是什么阻止它显示，直到点击。 我通过在show上调用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));
codemirror的5.14.2版本可以完全解决这个问题。 看到这个答案的细节。
另一个解决scheme（我也意识到，因为编辑器需要可见才能正确创build）是在构build过程中临时将父元素附加到主体元素，然后重新附加一次完成。
这样，你就不需要干涉元素，也不用担心编辑器可能被埋没的任何现有层次结构中的可见性。
在我的情况下，对于processr.com ，我有多个嵌套代码编辑元素，所有这些元素都需要随着用户更新而实时创build，所以我执行以下操作：
this.$elements.appendTo('body'); for (var i = 0; i < data.length; i++) { this.addElement(data[i]); } this.$elements.appendTo(this.$view);
它工作的很好，而且目前还没有可见的闪烁或类似的东西。
有些东西对我有用！ 🙂
var sh = setInterval(function() { agentConfigEditor.refresh(); }, 500); setTimeout(function(){ clearInterval(sh); },2000)
尝试调用焦点的DOM元素，而不是jQuery对象。
var editor=$( '#editor' ); editor[0].focus(); // or document.getElementById( 'editor' ).focus();
我今天晚上自己也遇到了这个问题的一个版本。
其他一些post认为textarea父母的可见性是重要的，如果它隐藏，那么你可以遇到这个问题。
在我的情况，forms本身和周围的环境都很好，但我的骨干视图pipe理器更高的渲染链是问题。
我的视图元素没有被放置在DOM上，直到视图已经完全呈现，所以我猜想不在DOM上的元素被认为是隐藏的或只是没有处理。
为了解决这个问题，我添加了一个post-render阶段（伪代码）：
view.render(); $('body').html(view.el); view.postRender();
在postRender中，视图可以做它所需要的知识，所有的内容现在都可以在屏幕上看到，这就是我移动CodeMirror的地方，它工作的很好。
这也可能解释为什么一个人可能遇到类似popup窗口的问题，因为在某些情况下他们可能会尝试在显示之前创build所有内容。
希望能帮助别人。
托比
<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>
