当它的父div样式变成显示块时如何刷新codemirror？答案

【问题标题】：How to refresh codemirror when it's parent div style becomes display block?当它的父div样式变成显示块时如何刷新codemirror？
【发布时间】：2021-08-06 08:46:22
【问题描述】：

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

提前致谢。

【问题讨论】：

标签： javascript codemirror

【解决方案1】：

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

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案3】：

你可以使用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
});

【讨论】：

你怎么添加它？
@GáborCsikós 将 js 保存在您的 CodeMirror 目录中的文件夹 /addon/display/autorefresh.js 中。
如果有人想了解有关自动刷新选项的更多详细信息：codemirror.net/doc/manual.html#addon_autorefresh

【解决方案4】：

选择 '.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()
}

【讨论】：