84

我正在使用 codemirror 2 并且它工作正常，除了编辑器的设置值不会加载到编辑器中，直到我单击编辑器并且它变得聚焦。

我希望编辑器无需单击即可显示其内容。有任何想法吗？

所有的 codemirror 演示都按预期工作，所以我想也许 textarea 没有集中，所以我也尝试了。

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

14 回答 14

63

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

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

这对我来说很有用。我在这里找到了答案。

于 2013-11-14T06:04:37.840 回答
41

以防万一，对于那些没有仔细阅读文档的人（比如我），但偶然发现了这一点。有一个自动刷新插件就是为了这个。

您需要autorefresh.js在文件中添加。现在你可以像这样使用它了。

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

});

奇迹般有效。

于 2017-03-06T07:25:29.727 回答
28

我希望您（或您加载的某些脚本）以这样一种方式干预 DOM，即编辑器在创建时被隐藏或处于奇怪的位置。refresh()在它可见后，它需要调用它的方法。

于 2011-12-02T08:21:04.270 回答
12

我碰巧在引导选项卡中使用 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));
于 2016-11-12T23:50:40.410 回答
5

有些东西对我有用。

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

        });
于 2015-12-11T05:25:13.027 回答
2

codemirror 的 5.14.2 版本通过附加功能完全解决了这个问题。有关详细信息，请参阅此答案。

于 2016-05-16T23:53:56.243 回答
1

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

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

在我的情况下，表单本身和周围环境都很好，但是渲染链上的 Backbone 视图管理器是问题所在。

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

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

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

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

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

希望对某人有所帮助。

托比

于 2013-06-21T23:55:25.837 回答
1

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

这样，您无需干预元素，或担心编辑器可能隐藏的任何现有层次结构中的可见性。

就我而言，对于processr.com，我有多个嵌套的代码编辑元素，所有这些元素都需要在用户进行更新时动态创建，因此我执行以下操作：

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

它工作得很好，到目前为止还没有可见的闪烁或类似的东西。

于 2014-03-19T09:41:35.403 回答
1

我正在使用反应，所有这些答案都不适用于我......阅读文档后，它的工作方式如下：

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

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;
           }}
        />
于 2019-02-15T09:23:32.390 回答
0

尝试在 DOM 元素而不是 jQuery 对象上调用焦点。

var editor=$( '#editor' );
editor[0].focus();
// or
document.getElementById( 'editor' ).focus();
于 2011-12-02T02:57:55.583 回答
0

原因：

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

例如：

当 CodeMirror 的 Dom 设置为 ' display: none ' 时。

修复方法：

当 CodeMirror 的 Dom 可见时，手动执行该cm.refresh()方法。

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

所以简单的方法是：

window.onclick = () => {
    setTimeout(() => {
        codeMirrorRef.refresh();
    }, 10);
};

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

于 2021-01-11T12:58:17.110 回答
0

使用刷新帮助解决这个问题。但是好像不太友好

于 2019-05-18T10:27:24.970 回答
0 
<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>
于 2015-12-11T07:45:27.863 回答
0

有些东西对我有用！:)

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

      setTimeout(function(){
        clearInterval(sh);  
      },2000)
于 2015-12-20T05:46:38.317 回答