I recently started to develop a class that manipulates over CodeMirror – dynamically links necessary libraries, provides comunication with server and so on.
Because of that I hold everything in variables, and upon initialisation, the CodeMirror is appended to DOM node which is not within document tree. Just like that:
var holder = document.createElement("div");
var textarea = document.createElement("textarea");
holder.appendChild(textarea);
this.editor = CodeMirror.fromTextArea(textarea, {/*options*/});
Then I append the DIV myself when .show() method is called upon my class:
this.show(node) {
if(this.editor!=null) {
node.parentNode.replaceChild(holder,node);
}
}
The editor is OK since click into it and try to draw, or after I resize window. But before, I just see blank area with disabled scroll bar. I believe this is because of way I initialise whole CodeMirror.
So what should I do to make it work, if I want to keep my class structure?
Link to live code (not for IE).
A more direct way would be to call
.refresh()on the CodeMirror instance after showing it. See http://codemirror.net/doc/manual.html#refresh