Cómo actualizar Codemirror cuando su estilo div principal se convierte en bloque de visualización?

Question

Estoy usando codemirror con textareas en una interfaz con pestañas, cuando no estoy en la pestaña que contiene codemirror y luego voy a él, obtengo un espacio en blanco vacío sin números de línea o el cursor, cuando actualizo la página funciona , Sé que es porque el contenido de las pestañas está oculto usando display: none; entonces, ¿cómo puedo solucionar este problema?

aquí está mi código, (También estoy usando 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(); 

gracias de antemano.

Answer 1

Asegúrese de llamar también al refresh cuando cambie a la pestaña que contiene el editor.

Answer 2

Coloque este código de abajo

// Refresh CodeMirror 
$('.CodeMirror').each(function(i, el){ 
    el.CodeMirror.refresh(); 
}); 

que trabajó para mí, asegúrese de colocarlo en la parte superior de la página. espero que ayude.