Блог

Я использую Codemirror и настраиваю его с помощью этого (с последней версией Google Chrome):

 <script>
  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    mode: 'markdown',
    autoRefresh:true,
    lineNumbers: false,
    lineWrapping: true,
    theme: "default",
    extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"},
  });
</script>
  

Проблема в том, что часть текста не видна до того, как я прокручиваю или редактирую текст.

1. ошибка editor.refresh()

Потому что мой div, содержащий текстовую область, не виден с самого начала, которое я вызываю editor.refresh(); . Раньше текст не был виден.

2. Сбой setTimeout

Я также пробовал этот трюк, но безуспешно:

 setTimeout(function() {
    editor.refresh();
},1);
  

3. Сбой автоматического обновления

Я также попробовал autoRefresh плагин, но это не дало никаких результатов.

Ниже приведен анимированный скриншот, на котором вы можете увидеть, что происходит.

Дополнительная информация

Класс pre with CodeMirror-line не отображается. Она не просто скрыта, ее даже там нет. Я предполагаю, что Codemirror пытается быть умным и отображать по требованию?

Редактировать: Здесь был ответ на этот вопрос https://discuss.codemirror.net/t/part-of-text-not-rendered/2030/5 Решение, которое сработало, заключалось в указании опции viewportMargin: Infinity .

У меня была подобная проблема, и в конечном итоге это было вызвано неправильной компоновкой CSS с моей стороны, за пределами CodeMirror. Попробуйте проверить элемент CodeMirror и проверить его высоту. Высота должна быть в пределах дисплея, а не за пределами дисплея. Когда у меня была похожая проблема, высота экземпляра CodeMirror была больше, чем дисплей. Я исправил это, обеспечив высоту 100% для всех divs, которые в конечном итоге содержат экземпляр CodeMirror.