Question

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

我希望编辑器在不必点击的情况下显示自己的内容。有任何想法吗？

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

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

Answer 1

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

this.codeMirrorInstance.setValue(content);
var that = this;
setTimeout(function() {
    that.codeMirrorInstance.refresh();
},1);

对我来说效果很好。我在here找到了答案。

Answer 2

我希望你（或你加载的一些脚本）干扰DOM，使得编辑器在创建时隐藏或处于奇怪的位置。在看到refresh()方法后，它需要调用它。

Answer 3

以防万一，对于那些没有仔细阅读文档的人（比如我），但偶然发现了这一点。那只有一个autorefresh addon。

您需要在文件中添加var editor = CodeMirror.fromTextArea(document.getElementById("id_commentsHint"), { mode: "javascript", autoRefresh:true, lineNumbers: false, lineWrapping: true, });。现在你可以像这样使用它。

name is 'Developments'

就像一个魅力。

Answer 4

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

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

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

Answer 7

另一个解决方案（我也意识到因为编辑器需要在正确创建时可见）是在构造期间临时将父元素附加到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 8

有些东西对我有用！：）

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

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

Answer 9

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

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

Answer 10

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

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

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

我的视图元素没有放在DOM上，直到视图完全渲染为止，所以我猜不是DOM上的元素被认为是隐藏的或者没有被处理过。

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

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

在postRender中，视图可以执行所需的操作，因为知道所有内容现在都可以在屏幕上看到，这是我移动CodeMirror并且工作正常的地方。

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

希望能有所帮助。

托比

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

我正在与react一起工作，所有这些答案都对我不起作用...阅读文档后，它的工作方式如下：

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

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

Answer 13

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

Answer 14

原因：

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

例如：

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

修复方法：

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

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

所以简单的方法是：

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

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

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

14 个答案: