Создание проблем с динамическим рендерингом CodeMirror

Question

Недавно я начал разрабатывать класс, который манипулирует над CodeMirror - динамически связывает необходимые библиотеки, обеспечивает связь с сервером и так далее.
Из-за этого я держу все в переменных и при инициализации CodeMirror добавляется к узлу DOM, который не находится внутри дерева документов. Просто так:

var holder = document.createElement("div"); 
var textarea = document.createElement("textarea");  
holder.appendChild(textarea); 
this.editor = CodeMirror.fromTextArea(textarea, {/*options*/}); 

Тогда я добавьте DIV сам когда .show() метод вызывается на моем классе:

this.show(node) { 
    if(this.editor!=null) { 
    node.parentNode.replaceChild(holder,node); 
    } 
} 

Редактор ОК, так как мыши в него и попытаться сделать, или после того, как изменить размер окно. Но прежде, я просто вижу пустую область с отключенной полосой прокрутки. Я считаю, что это из-за того, что я инициализирую весь CodeMirror.
Так что я должен сделать, чтобы он работал, если я хочу сохранить свою структуру классов? Link to live code (не для IE).

Answer 1

Более прямым способом было бы вызвать .refresh() экземпляр CodeMirror после его отображения. См. http://codemirror.net/doc/manual.html#refresh

Answer 2

Так что я решил эту проблему очень просто - я отправка onresize события после добавления редактора дерева DOM:

node.parentNode.replaceChild(holder,node); 
var evt = document.createEvent('UIEvents'); 
evt.initUIEvent('resize', true, false,window,0); 
window.dispatchEvent(evt); 

на основе How to dispatch resize event? вопроса.