我正在使用codemirror 2并且它工作正常，除了编辑器的设置值没有加载到编辑器中，直到我单击编辑器并且它变得集中。
我希望编辑器在不必点击的情况下显示自己的内容。有任何想法吗？
所有的codemirror演示都按预期工作，所以我想也许textarea没有集中，所以我也尝试过。
$("#editor").focus();
var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
mode: "text/html",
height: "197px",
lineNumbers: true
});
您必须在setValue（）之后调用refresh（）。但是，必须使用setTimeout将refresh（）推迟到CodeMirror / Browser根据新内容更新布局后：
this.codeMirrorInstance.setValue(content);
var that = this;
setTimeout(function() {
that.codeMirrorInstance.refresh();
},1);
这对我来说很有用。我在here找到了答案。
<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)
我正在做出反应，所有这些答案都不适用于我...阅读文档之后，它的工作原理如下：
在构造函数中，我初始化了一个代码镜像实例：
this.mirrorInstance = null;
并且在打开包含codeEditor的选项卡时，我在1 millisecocnd之后刷新了实例：
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，使得编辑器在创建时隐藏或处于奇怪的位置。在看到它的refresh()方法后，它需要调用它。
以防万一，对于那些没有仔细阅读文档的人（比如我），但偶然发现了这一点。那里有一个autorefresh addon。
您需要在文件中添加autorefresh.js。现在你可以像这样使用它。
var editor = CodeMirror.fromTextArea(document.getElementById("id_commentsHint"), {
mode: "javascript",
autoRefresh:true,
lineNumbers: false,
lineWrapping: true,
});
奇迹般有效。
我碰巧在引导选项卡中使用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));
有些东西对我有用。
$(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版本的codemirror通过添加完全解决了这个问题。有关详细信息，请参阅this answer。
另一个解决方案（我也意识到是因为编辑器需要在正确创建时可见）是在构造期间临时将父元素附加到body元素，然后在完成后重新附加。
这样，您就不需要插入元素，也不必担心编辑器可能被隐藏的任何现有层次结构中的可见性。
就我而言，对于processr.com，我有多个嵌套的代码编辑元素，所有这些都需要在用户进行更新时动态创建，因此我执行以下操作：
this.$elements.appendTo('body');
for (var i = 0; i < data.length; i++)
{
this.addElement(data[i]);
}
this.$elements.appendTo(this.$view);
它工作得很好，到目前为止还没有可见的闪烁或类似的东西。
尝试将焦点调用于DOM元素而不是jQuery对象。
var editor=$( '#editor' );
editor[0].focus();
// or
document.getElementById( 'editor' ).focus();
我今天晚上自己遇到了这个问题。
其他一些帖子认为textarea父母的可见性很重要，如果它被隐藏，那么你可能会遇到这个问题。
在我的情况下，表单本身和周围的环境很好，但我的Backbone视图管理器更高的渲染链是问题。
在视图完全呈现自己之前，我的视图元素没有放在DOM上，所以我想不在DOM上的元素被认为是隐藏的或者只是没有被处理。
为了解决这个问题，我添加了一个后渲染阶段（伪代码）：
view.render();
$('body').html(view.el);
view.postRender();
在postRender中，视图可以执行所需的操作，因为知道所有内容现在都可以在屏幕上看到，这是我移动CodeMirror的地方，并且它工作正常。
这也可能会解释为什么人们可能会遇到像弹出窗口这样的问题，因为在某些情况下他们可能会尝试在显示之前构建所有内容。
希望能帮助别人。
托比