Search code examples
javascriptcsscodemirror

Codemirror - minimum lines number

Anbody does have an solution for a min lines number - in Codemirror?

min-height worked for me but do not insert empty lines for the height.

JS

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    gutter: true,
    lineWrapping: true
});

CSS

.CodeMirror-scroll {
  overflow: auto;
  height: auto; overflow: visible;
  position: relative;
  outline: none;
  min-height: 300px; /* the minimum height */
}

Maybe there is a simple solution to insert empty lines for that ?

Solution

  • remove the min-height: 300px; and initialize the editor with new lines as the starting value:

    var minLines = 3;
var startingValue = '';
for (var i = 0; i < minLines; i++) {
    startingValue += '\n';
}

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    gutter: true,
    lineWrapping: true,
    value: startingValue
});

    currently, CodeMirror's value option does not seem to have an affect for up to version 2.21. this can be easily bypassed by using setValue() after initialization:

    ///...
// initialize as before, omitting the value option

editor.setValue(startingValue);

    note: make sure not to set autoClearEmptyLines: true as it will clash and cancel out the inserted empty lines.