Codemirror autoresize до заданного количества строк

Я пытаюсь разрешить codemirror авторизировать до заданного количества строк или высоты пикселя. После достижения этого максимального размера виджет должен добавить полосы прокрутки.

CodeMirror.fromTextArea(document.getElementById("code"), {
   lineNumbers: true,
   viewportMargin: 50

});

max-height не работает

.CodeMirror {
 border: 1px solid #eee;
 height: 100%;
}

http://jsfiddle.net/qzjo4ejh/

7
codemirror html javascript

3 ответов

вы должны дать .CodeMirror a height: auto стиль, и поставить max-height on .CodeMirror-scroll. Встроенный редактор на страница проекта делает это (источник просмотра, он находится прямо вверху).

18

Как насчет чего-то подобного :

var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("code"), {
   lineNumbers: true,
   viewportMargin: 50
});

var height;
if(myCodeMirror.lineCount() > 5) {
    height = 50;
} else {
    height = 20 * myCodeMirror.lineCount();
}
myCodeMirror.setSize(500, height);

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

1

Это то, что работал для меня. The CodeMirror-scroll был причиной того, что он слишком большой. Вам не нужно ничего делать с viewportMargin несмотря на то, что документы говорят.

.CodeMirror {
    border: 1px solid #eee;
    height: auto;
    max-height:100px;
}

.CodeMirror-scroll {
    height: auto;
    max-height:100px;
}

Скрипка

1