Текст в редакторе CodeMirror не появляется, пока на него не кликнуть мышкой

Столкнулся сегодня с подобной проблемой в своем проекте. Много гуглил и выяснил, что ни у меня одного такая проблема. Возникает она на страничках, что переключаются вкладками. То есть, в DOM-узлах, которые изначально имеют свойство display:none, и уже по клику на нужной вкладке, кнопке или чем-то еще, меняют статус на видимый (display:block, display:inline и т.д.)

Видел много танцев с бубном, но в моем случае, ни один из них не подошел. Оказалось, что проблема более, чем известна самим разработчикам, и для ее решения они написали специальный аддон, который называется AutoRefresh. Он-то вам и пригодится в случае с инициализацией редактора в скрытом DOM-узле. Этот аддон определяет параметр autoRefresh, который вы можете установить в true, для гарантии того, что если редактор не был виден при инициализации, то он будет обновлен при первом своем  появлении. Это делается путем опроса каждые 250 миллисекунд по дефолту (значение интервала можно поправить руками, разумеется).

Этот аддон обновляет редактор только один раз, когда тот впервые становится видимым и более его не отслеживает, что, собственно, нам и требуется.

Находится он в папке /addon/display вашего дистрибутива. Ну или здесь, если вы, как и я – тоже любитель хотлинка: https://codemirror.net/5/addon/display/autorefresh.js

Обратите внимание, что включать его в HTML код вашей страницы нужно после включения основого скрипта – codemirror.js, иначе, поучите ошибку, т.к. класс CodeMirror должен быть определен заранее.

Ну и лайфхак на добавку. Чтобы сделать редактор CodeMirror масштабируемым и его размеры можно было растягивать, потянув мышкой за правый нижний угол, добавьте в CSS своего сайта вот это:

.CodeMirror {
    resize: vertical;
    overflow: auto !important;
}

Надеюсь, что этот мой пост будет кому-то полезен. Ведь CodeMirror – это шикарная библиотека, которую любят все!