javascript 当它的父div样式成为显示块时如何刷新codemirror？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10381784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to refresh codemirror when it's parent div style becomes display block?
提问by Pierre
I'm using codemirror with textareas in a tabbed interface, when i'm not in the tab that contains codemirror and then go to it, I get empty white space without line numbers or the cursor, when I refresh the page it works, I know it's because the tabs content is hidden using display: none;so how can I fix this issue ?
我在选项卡式界面中使用带有 textareas 的 codemirror，当我不在包含 codemirror 的选项卡中然后转到它时，我会得到没有行号或光标的空白区域，当我刷新页面时，它可以工作，我知道这是因为标签内容是隐藏的，display: none;所以我该如何解决这个问题？
here's my code, (I'm also using jquery):
这是我的代码，（我也在使用 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();
thanks in advance.
提前致谢。
回答by Marijn
Make sure you also call refreshwhen switching to the tab that contains the editor.
确保refresh在切换到包含编辑器的选项卡时也调用。
回答by Amr SubZero
Try this :
试试这个 ：
// Refresh CodeMirror
$('.CodeMirror').each(function(i, el){
el.CodeMirror.refresh();
});
回答by joseantgv
You can use autorefreshaddon:
您可以使用autorefresh插件：
display/autorefresh.js
This addon can be useful when initializing an editor in a hidden DOM node, in cases where it is difficult to call refresh when the editor becomes visible. It defines an option autoRefresh which you can set to true to ensure that, if the editor wasn't visible on initialization, it will be refreshed the first time it becomes visible. This is done by polling every 250 milliseconds (you can pass a value like {delay: 500} as the option value to configure this). Note that this addon will only refresh the editor once when it first becomes visible, and won't take care of further restyling and resizing.
显示/自动刷新.js
当在隐藏的 DOM 节点中初始化编辑器时，这个插件很有用，在编辑器变得可见时很难调用刷新的情况下。它定义了一个选项 autoRefresh，您可以将其设置为 true 以确保如果编辑器在初始化时不可见，它将在第一次变为可见时刷新。这是通过每 250 毫秒轮询一次来完成的（您可以传递一个像 {delay: 500} 这样的值作为配置它的选项值）。请注意，此插件只会在编辑器首次可见时刷新一次，并且不会进行进一步的样式调整和大小调整。
You just need to add JS library and set autoRefreshto true:
您只需要添加 JS 库并设置autoRefresh为true：
var editor = CodeMirror.fromTextArea(document.getElementById($this.attr('id')), {
lineNumbers: true,
mode: text/html,
enterMode: "keep",
tabMode: "shift",
autoRefresh: true
});
