Javascript Codemirror 编辑器在单击之前不会加载内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8349571/
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
Codemirror editor is not loading content until clicked
提问by Karl
I am using codemirror 2 and its working fine except that the editor's set value doesn't load into the editor until I click the editor and it becomes focused.
我正在使用 codemirror 2 并且它工作正常，只是编辑器的设置值在我单击编辑器并变得聚焦之前不会加载到编辑器中。
I want the editor to show the content of itself without it having to be clicked. Any ideas?
我希望编辑器无需单击即可显示自身的内容。有任何想法吗？
All of the codemirror demos work as expected so I figured maybe the textarea isn't focused so I tried that too.
所有的 codemirror 演示都按预期工作，所以我想也许 textarea 没有集中，所以我也试过了。
$("#editor").focus();
var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
mode: "text/html",
height: "197px",
lineNumbers: true
});
采纳答案by nvd_ai
You must call refresh() after setValue(). However, you must use setTimeout to postpone the refresh() to after CodeMirror/Browser has updated the layout according to the new content:
您必须在 setValue() 之后调用 refresh()。但是，您必须使用 setTimeout 将 refresh() 推迟到 CodeMirror/Browser 根据新内容更新布局之后：
this.codeMirrorInstance.setValue(content);
var that = this;
setTimeout(function() {
that.codeMirrorInstance.refresh();
},1);
It works well for me. I found the answer in here.
这对我来说很有用。我在这里找到了答案。
回答by Marijn
I expect you (or some script you loaded) is meddling with the DOM in such a way that the editor is hidden or otherwise in a strange position when created. It'll require a call to its refresh()method after it is made visible.
我希望您（或您加载的某些脚本）以这样一种方式干预 DOM，即编辑器在创建时被隐藏或处于奇怪的位置。refresh()在使其可见后，它需要调用其方法。
回答by Vikash Saini
Just in case, and for everyone who doesn't read the documentation carefully enough (like me), but stumbles upon this. There's an autorefresh addonjust for that.
以防万一，对于那些没有足够仔细地阅读文档的人（比如我），但偶然发现了这一点。有一个自动刷新插件就是为了这个。
You need to add autorefresh.jsin your file.
Now you can use it like this.
您需要添加autorefresh.js到您的文件中。现在你可以像这样使用它。
var editor = CodeMirror.fromTextArea(document.getElementById("id_commentsHint"), {
mode: "javascript",
autoRefresh:true,
lineNumbers: false,
lineWrapping: true,
});
works like a charm.
奇迹般有效。
回答by Yes Barry
I happen to be using CodeMirror within a bootstrap tab. I suspected the bootstrap tabs were what was preventing it from showing up until clicked. I fixed this by simply calling the refresh()method on show.
我碰巧在引导选项卡中使用 CodeMirror。我怀疑引导选项卡是阻止它在单击之前显示的原因。我通过简单地调用refresh()显示的方法来解决这个问题。
var cmInstance = CodeMirror.fromTextArea(document.getElementById('cm'), {
lineNumbers: true,
lineWrapping: true,
indentUnit: 4,
mode: 'css'
});
// to fix code mirror not showing up until clicked
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function() {
this.refresh();
}.bind(cmInstance));
回答by Jinu
Something worked for me.
有些东西对我有用。
$(document).ready(function(){
var editor = CodeMirror.fromTextArea(document.getElementById("code2"), {
//lineNumbers: true,
readOnly: true,
autofocus: true,
matchBrackets: true,
styleActiveLine: true
});
setTimeout(function() {
editor.refresh();
}, 100);
});
回答by Paul Whipp
The 5.14.2 version of codemirror addresses this fully with an add on. See this answerfor details.
codemirror 的 5.14.2 版本通过附加组件完全解决了这个问题。有关详细信息，请参阅此答案。
回答by Ammar Ismaeel
I am working with react, and all these answers did not work with me...After reading the documentation it worked like this:
我正在使用 react，所有这些答案都不适用于我......阅读文档后，它的工作方式如下：
in the constructor, I initialized an instance of code Mirror:
在构造函数中，我初始化了代码镜像的一个实例：
this.mirrorInstance = null;
and on opening the tab that contains the codeEditor, I refreshed the instance after 1 millisecocnd:
在打开包含 codeEditor 的选项卡时，我在 1 毫秒后刷新了实例：
toggleSubTab() {
setTimeout(() => {
this.mirrorInstance.refresh();
}, 1);
}
and here is the JSX code:
这是 JSX 代码：
<CodeMirror
value={this.state.codeEditor}
options={{
mode: "htmlmixed",
theme: "default",
lineNumbers: true,
lineWrapping: true,
autoRefresh: true
}}
editorDidMount={editor => {
this.mirrorInstance = editor;
}}
/>
回答by davestewart
Yet another solution (which I also realised was because the editor needed to be visible to create properly) is to temporarily attach the parent element to the body element during construction, then reattach once complete.
另一个解决方案（我也意识到这是因为编辑器需要可见才能正确创建）是在构建期间临时将父元素附加到 body 元素，然后在完成后重新附加。
This way, you don't need to meddle with elements, or worry about visibility in any existing hierarchies that your editor might be buried.
这样，您就无需干预元素，也无需担心编辑器可能被掩埋的任何现有层次结构中的可见性。
In my case, for processr.com, I have multiple, nested code editing elements, all of which need to be created on the fly as the user makes updates, so I do the following:
就我而言，对于processr.com，我有多个嵌套的代码编辑元素，所有这些元素都需要在用户进行更新时即时创建，因此我执行以下操作：
this.$elements.appendTo('body');
for (var i = 0; i < data.length; i++)
{
this.addElement(data[i]);
}
this.$elements.appendTo(this.$view);
It works great, and there's been no visible flicker or anything like that so far.
它工作得很好，到目前为止还没有可见的闪烁或类似的东西。
回答by Koray Bayram
<div class="tabbable-line">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tabXml1" data-toggle="tab" aria-expanded="true">Xml 1</a>
</li>
<li class="">
<a href="#tabXml2" id="xmlTab2Header" data-toggle="tab" aria-expanded="true">Xml 2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tabXml1">
<textarea id="txtXml1" />
</div>
<div class="tab-pane" id="tabXml2">
<textarea id="txtXml2" />
</div>
</div>
</div>
<link rel="stylesheet" href="~/Content/codemirror.min.css">
<style type="text/css">
.CodeMirror {
border: 1px solid #eee;
max-width: 100%;
height: 400px;
}
</style>
<script src="~/Scripts/codemirror.min.js"></script>
<script src="~/Scripts/codemirror.xml.min.js"></script>
<script>
$(document).ready(function () {
var cmXml1;
var cmXml2;
cmXml1 = CodeMirror.fromTextArea(document.getElementById("txtXml1"), {
mode: "xml",
lineNumbers: true
});
cmXml2 = CodeMirror.fromTextArea(document.getElementById("txtXml2"), {
mode: "xml",
lineNumbers: true
});
// Refresh code mirror element when tab header is clicked.
$("#xmlTab2Header").click(function () {
setTimeout(function () {
cmXml2.refresh();
}, 10);
});
});
</script>
回答by cnwangzd
Something worked for me! :)
有些东西对我有用！:)
var sh = setInterval(function() {
agentConfigEditor.refresh();
}, 500);
setTimeout(function(){
clearInterval(sh);
},2000)
