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

时间:2012-04-30 10:02:01

标签: javascript codemirror

我在选项卡式界面中使用带有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 个答案:

答案 0 :(得分:13)

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

答案 1 :(得分:8)

试试这个:

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

答案 2 :(得分:0)

您可以使用autorefresh插件:

  

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

答案 3 :(得分: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()
}