我在选项卡式界面中使用带有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();
提前感谢。
答案 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()
}