如何在父div样式成为显示块时刷新codemirror？

Question

我在选项卡式界面中使用带有textareas的codemirror，当我不在包含codemirror的选项卡中然后转到它时，我得到没有行号或光标的空白空间，当我刷新它工作的页面时，我知道这是因为使用display: none;隐藏标签内容所以我该如何解决这个问题？

这是我的代码，（我也使用jquery）：

var editor = CodeMirror.fromTextArea(document.getElementById($this.attr('id')), {
        lineNumbers: true,
        mode: text/html,
        enterMode: "keep",
        tabMode: "shift"
    });

    $(editor.getScrollerElement()).width(300);
    width = $(editor.getScrollerElement()).parent().width();
    $(editor.getScrollerElement()).width(width);
    editor.refresh();

提前致谢。

Answer 1

确保在切换到包含编辑器的选项卡时也调用refresh。

Answer 2

试试这个 ：

// Refresh CodeMirror
$('.CodeMirror').each(function(i, el){
    el.CodeMirror.refresh();
});

Answer 3

你可以使用autorefresh插件：

显示/ autorefresh.js

在初始化隐藏DOM节点中的编辑器时，如果编辑器变得可见时很难调用刷新，则此插件非常有用。它定义了一个选项autoRefresh，您可以将其设置为true，以确保如果编辑器在初始化时不可见，它将在第一次可见时刷新。这是通过每250毫秒轮询完成的（您可以传递类似{delay：500}的值作为选项值来配置它）。请注意，此插件仅在编辑器首次显示时才刷新编辑器，并且不会进行进一步的重新定位和调整大小。

你只需要添加JS库并将autoRefresh设置为true：

var editor = CodeMirror.fromTextArea(document.getElementById($this.attr('id')), {
    lineNumbers: true,
    mode: text/html,
    enterMode: "keep",
    tabMode: "shift",
    autoRefresh: true
});