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

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

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

});

максимальная высота не работает

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

http://jsfiddle.net/qzjo4ejh/


javascript html codemirror
person ic3    schedule 07.05.2015    source источник
comment
Дублировать? stackoverflow.com/questions/28378229 /   -  person Béranger    schedule 07.05.2015
comment
нет, это не фиксированный размер, а изменяемый размер с максимальным то, что я ищу   -  person ic3    schedule 07.05.2015

Ответы (3)


arrow_upward
30
arrow_downward

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

person Marijn    schedule 08.05.2015
comment
Большое спасибо, пожертвование PayPal было бы кстати ;-) - person ic3; 08.05.2015
comment
Это правильный способ сделать это. Пожалуйста, рассмотрите возможность добавления его в документацию в легкодоступном месте. - person Danielo515; 06.07.2015
comment
Это больше не работает - person Alexis Pister; 28.05.2021
comment
Кажется, все еще работает, когда я пытаюсь это сделать. - person Marijn; 29.05.2021

arrow_upward
6
arrow_downward

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

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

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

Скрипка

person Charles Clayton    schedule 24.09.2015
comment
автоматическая высота на .CodeMirror-scroll просто спасла мой день, без этого редактор всегда просто показывал бы 100% высоту. Благодарность! - person ZPiDER; 20.03.2017

arrow_upward
2
arrow_downward

А как насчет такого:

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 при изменении строк.

person Béranger    schedule 07.05.2015
comment
вы можете попробовать скрипку, она не работает должным образом. - person ic3; 08.05.2015
comment
Проверено на скрипке, работает отлично. просто нужно установить другие строки текста и 20 вместо 10 пикселей по строке - person Béranger; 08.05.2015
comment
Проверьте ответ Марина (он владелец проекта). Тем не менее спасибо за ваши усилия. - person ic3; 09.05.2015