12

我在选项卡式界面中使用带有 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();

提前致谢。

4

4 回答 4

15

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

于 2012-05-01T08:44:34.530 回答
14

试试这个 ：

// Refresh CodeMirror
$('.CodeMirror').each(function(i, el){
    el.CodeMirror.refresh();
});
于 2013-09-06T20:38:08.797 回答
4

您可以使用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
});
于 2019-03-28T17:05:08.507 回答
0

选择“.CodeMirror”的类并实例化对象以在更改大小时进行刷新

例如，在我的情况下，我想单击一个按钮来添加和删除一个“活动”类，以使 CodeMirror 的内容出现和消失。

.CodeMirror {
  border-radius: 3px;
  margin: 10px 0 8px;
  padding: 5px;
  width: 100%;
  height: auto;
  display: none;
}

.CodeMirror.active {
  display: block;
}

代码镜像对象

const editor = CodeMirror.fromTextArea(textarea,{
    lineNumbers:true,
    tabSize:4,
    theme: 'material',
    mode:"javascript",
    readOnly: true,
  });

btn 事件

    btn.addEventListener('click', showCode)

解决方案

function showCode () { 
  const editor= document.querySelector('.CodeMirror')
  editor.classList.toggle('active')
  
  // use the object for refresh CodeMirror 
  editor.CodeMirror.refresh()
}
于 2021-08-06T00:46:22.403 回答