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

Question

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

我希望编辑器无需单击即可显示其自身内容。有什么想法吗？

所有代码镜像演示都按预期工作，所以我想文本区域可能没有聚焦，所以我也尝试了。

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

Answer 1

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

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

这对我来说效果很好。我在这里找到了答案< /a>.

Answer 2

以防万一，对于那些没有足够仔细地阅读文档的人（比如我），但偶然发现了这一点。
有一个自动刷新插件专门用于此目的。

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

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

});

就像魅力一样。

Answer 3

我预计您（或您加载的某些脚本）会以某种方式干扰 DOM，从而导致编辑器在创建时被隐藏或处于奇怪的位置。使其可见后，需要调用其 refresh() 方法。

Answer 4

我碰巧在引导选项卡中使用 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 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);

        });

Answer 6

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

Answer 7

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

在构造函数中，我初始化了代码 Mirror 的实例：

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

Answer 8

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

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

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

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

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

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

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

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

希望对某人有帮助。

托比

Answer 9

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

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

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

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

它工作得很好，并且到目前为止没有明显的闪烁或类似的情况。

Answer 10

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

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

Answer 11

<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 12

有些东西对我有用！ :)

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

      setTimeout(function(){
        clearInterval(sh);  
      },2000)

Answer 13

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

Answer 14

原因：

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

例如：

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

解决方法：

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

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

所以简单的方法是：

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

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

Answer 15

将其链接到主代码镜像对象，确保没有链接其他任何东西

.on('change', editor => {
   globalContent = editor.getValue();
});;

Answer 16

autorefresh 对我没有帮助，因为在我的情况下，代码镜像编辑器位于弹出窗口内。
因此，在弹出窗口打开后调用编辑器实例的 refresh() 方法。它必须是可见的才能绘制自己。