Javascript Codemirror编辑器在单击之前不会加载内容

我使用的是codemirror 2，它工作正常，只是编辑器的设置值在我单击编辑器并使其聚焦之前不会加载到编辑器中

我希望编辑器显示自己的内容，而不必单击它。有什么想法吗

所有的codemirror演示都按预期工作，所以我想可能文本区域没有聚焦，所以我也尝试了

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

---

尝试在DOM元素而不是jQuery对象上调用focus

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

---

我认为您（或您加载的某个脚本）正在以这样一种方式干预DOM，即编辑器在创建时被隐藏或处于奇怪的位置。在它被显示后，需要调用它的

refresh（）

方法。

我今天晚上遇到了这个问题的一个版本

许多其他帖子认为textarea父对象的可见性很重要，如果它是隐藏的，那么您可能会遇到这个问题

在我的情况下，形式本身和周围环境都很好，但我的主干视图管理器（位于渲染链的更高位置）是个问题

我的视图元素在视图完全呈现自己之前不会放置在DOM上，因此我猜不在DOM上的元素被认为是隐藏的或只是没有处理

为了解决这个问题，我添加了一个后期渲染阶段（伪代码）：

在postRender中，视图可以做它需要的事情，知道所有内容现在都在屏幕上可见，这就是我移动CodeMirror的地方，它工作得很好

这也可能在某种程度上解释了为什么人们可能会遇到弹出窗口之类的问题，因为在某些情况下，他们可能会尝试在显示之前构建所有内容

希望这能帮助别人

Toby

您必须在setValue（）之后调用refresh（）。但是，必须使用setTimeout将刷新（）延迟到CodeMirror/Browser根据新内容更新布局之后：

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

它对我很有效。我在中找到了答案。

另一个解决方案（我也意识到这是因为编辑器需要可见才能正确创建）是在构造期间将父元素临时附加到主体元素，然后在完成后重新附加

这样，您就不需要干预元素，也不必担心编辑器可能隐藏的任何现有层次结构中的可见性

在我的例子中，例如，我有多个嵌套的代码编辑元素，所有这些元素都需要在用户进行更新时动态创建，因此我执行以下操作：

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

this.$elements.appendTo（'body'）；
对于（变量i=0；i

---

它工作得很好，到目前为止还没有出现任何可见的闪烁或类似的情况。

有些东西对我有效

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

        });

.CodeMirror{
边框：1px实心#eee；
最大宽度：100%；
高度：400px；
}
$（文档）.ready（函数（）{
var-cmXml1；
var-cmXml2；
cmXml1=CodeMirror.fromTextArea（document.getElementById（“txtXml1”）{
模式：“xml”，
行号：对
});
cmXml2=CodeMirror.fromTextArea（document.getElementById（“TXTXTML2”）{
模式：“xml”，
行号：对
});
//单击选项卡标题时刷新代码镜像元素。
$（“#xmlTab2Header”）。单击（函数（）{
setTimeout（函数（）{
cmXml2.refresh（）；
}, 10);
});
});

有些东西对我有用！：）

---

codemirror的5.14.2版本通过一个附加组件完全解决了这一问题。有关详细信息，请参阅。

我碰巧在引导选项卡中使用了CodeMirror。我怀疑是引导选项卡阻止了它显示，直到单击为止。我通过在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));

---

以防万一，对于那些没有仔细阅读文档（比如我）但偶然发现这一点的人来说。 有一个公正的理由

您需要在文件中添加

autorefresh.js

。 现在你可以这样使用它了

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

});

---

工作起来很有魅力。

我正在与react合作，但所有这些答案对我都不起作用……在阅读文档后，它是这样工作的：

在构造函数中，我初始化了代码镜像的一个实例：

this.mirrorInstance = null;

打开包含codeEditor的选项卡时，我在1毫秒后刷新了实例：

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;
           }}
        />

{
this.mirrorInstance=编辑器；
}}
/>

使用刷新帮助解决此问题。但似乎不友好

原因：

当DOM节点不可见时，CodeMirror不会更新DOM内容。

例如：

当CodeMirror的Dom设置为“display:none”时

解决方法：

当CodeMirror的Dom可见时，手动执行

cm.refresh（）

方法

例如，在我的应用程序中，单击tab元素时，CodeMirror Dom将可见

因此，简单的方法是：

window.onclick=（）=>{
设置超时（（）=>{
codeMirrorRef.refresh（）；
}, 10);
};

---

您可以在更具体的元素上添加事件侦听器以提高性能。

感谢您的响应，我也将尝试一下。在我的实现中，父对象从

display:none导致此问题的原因-此答案轻松解决了问题！谢谢你，@Marijn！这也解决了我的问题，父元素是GWT TabLayoutPanel或披露面板，用于切换其子元素的显示。我在这些父面板和延迟面板上使用listener修复了它
this.mirrorInstance = null;

toggleSubTab() {
    setTimeout(() => {
      this.mirrorInstance.refresh();
    }, 1);
  }

<CodeMirror
           value={this.state.codeEditor}
           options={{
           mode: "htmlmixed",
           theme: "default",
           lineNumbers: true,
           lineWrapping: true,
           autoRefresh: true
           }}
           editorDidMount={editor => {
           this.mirrorInstance = editor;
           }}
        />