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 ?
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 ?
Share Improve this question asked Apr 30, 2012 at 8:42 e382df99a7950919789725ceeec126e382df99a7950919789725ceeec126 5,9815 gold badges34 silver badges56 bronze badges 04 Answers
Reset to default 8remove 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.
so guys I got the solution.
on any reason the editor does not get the value from the configuration options so i set the value after it. @Eliran thanks, i used your method to set the value.
editor.setValue(startingValue);
DEMO
http://jsfiddle/vujLv/1/
editor.setValue( value + "\n".repeat(10) )
Here I am defining a CodeMirror option "minLines" and manipulating some keybindings and history.
This disables the CodeMirror instance's lines from ever going below the minLines value, not just setting so many lines on init.
You can just pop this in a file named "minLines.js" and put that in /addons and it's ready to use.
Here is my Codepen example.
// set minimum number of lines CodeMirror instance is allowed to have
(function (mod) {
mod(CodeMirror);
})(function (CodeMirror) {
var fill = function (cm, start, n) {
while (start < n) {
let count = cm.lineCount();
cm.replaceRange("\n", { line: count - 1 }), start++;
// remove new line change from history (otherwise user could ctrl+z to remove line)
let history = cm.getHistory();
history.done.pop(), history.done.pop();
cm.setHistory(history);
if (start == n) break;
}
};
var pushLines = function (cm, selection, n) {
// push lines to last change so that "undo" doesn't add lines back
var line = cm.lineCount() - 1;
var history = cm.getHistory();
history.done[history.done.length - 2].changes.push({
from: {
line: line - n,
ch: cm.getLine(line - n).length,
sticky: null
},
text: [""],
to: { line: line, ch: 0, sticky: null }
});
cm.setHistory(history);
cm.setCursor({ line: selection.start.line, ch: selection.start.ch });
};
var keyMap = {
Backspace: function (cm) {
var cursor = cm.getCursor();
var selection = {
start: cm.getCursor(true),
end: cm.getCursor(false)
};
// selection
if (selection.start.line !== selection.end.line) {
let func = function (e) {
var count = cm.lineCount(); // current number of lines
var n = cm.options.minLines - count; // lines needed
if (e.key == "Backspace" || e.code == "Backspace" || e.which == 8) {
fill(cm, 0, n);
if (count <= cm.options.minLines) pushLines(cm, selection, n);
}
cm.display.wrapper.removeEventListener("keydown", func);
};
cm.display.wrapper.addEventListener("keydown", func); // fires after CodeMirror.Pass
return CodeMirror.Pass;
} else if (selection.start.ch !== selection.end.ch) return CodeMirror.Pass;
// cursor
var line = cm.getLine(cursor.line);
var prev = cm.getLine(cursor.line - 1);
if (
cm.lineCount() == cm.options.minLines &&
prev !== undefined &&
cursor.ch == 0
) {
if (line.length) {
// add a line because this line will be attached to previous line per default behaviour
cm.replaceRange("\n", { line: cm.lineCount() - 1 });
return CodeMirror.Pass;
} else cm.setCursor(cursor.line - 1, prev.length); // set cursor at end of previous line
}
if (cm.lineCount() > cm.options.minLines || cursor.ch > 0)
return CodeMirror.Pass;
},
Delete: function (cm) {
var cursor = cm.getCursor();
var selection = {
start: cm.getCursor(true),
end: cm.getCursor(false)
};
// selection
if (selection.start.line !== selection.end.line) {
let func = function (e) {
var count = cm.lineCount(); // current number of lines
var n = cm.options.minLines - count; // lines needed
if (e.key == "Delete" || e.code == "Delete" || e.which == 46) {
fill(cm, 0, n);
if (count <= cm.options.minLines) pushLines(cm, selection, n);
}
cm.display.wrapper.removeEventListener("keydown", func);
};
cm.display.wrapper.addEventListener("keydown", func); // fires after CodeMirror.Pass
return CodeMirror.Pass;
} else if (selection.start.ch !== selection.end.ch) return CodeMirror.Pass;
// cursor
var line = cm.getLine(cursor.line);
if (cm.lineCount() == cm.options.minLines) {
if (
cursor.ch == 0 &&
(line.length !== 0 || cursor.line == cm.lineCount() - 1)
)
return CodeMirror.Pass;
if (cursor.ch == line.length && cursor.line + 1 < cm.lineCount()) {
// add a line because next line will be attached to this line per default behaviour
cm.replaceRange("\n", { line: cm.lineCount() - 1 });
return CodeMirror.Pass;
} else if (cursor.ch > 0) return CodeMirror.Pass;
} else return CodeMirror.Pass;
}
};
var onCut = function (cm) {
var selection = {
start: cm.getCursor(true),
end: cm.getCursor(false)
};
setTimeout(function () {
// wait until after cut is plete
var count = cm.lineCount(); // current number of lines
var n = cm.options.minLines - count; // lines needed
fill(fm, 0, n);
if (count <= cm.options.minLines) pushLines(cm, selection, n);
});
};
var start = function (cm) {
// set minimum number of lines on init
var count = cm.lineCount(); // current number of lines
cm.setCursor(count); // set the cursor at the end of existing content
fill(cm, 0, cm.options.minLines - count);
cm.addKeyMap(keyMap);
// bind events
cm.display.wrapper.addEventListener("cut", onCut, true);
};
var end = function (cm) {
cm.removeKeyMap(keyMap);
// unbind events
cm.display.wrapper.removeEventListener("cut", onCut, true);
};
CodeMirror.defineOption("minLines", undefined, function (cm, val, old) {
if (val !== undefined && val > 0) start(cm);
else end(cm);
});
});