Question

一个人确实有一个最小行数的解决方案 - 在Codemirror？

min-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 */
}

也许有一个简单的解决方案来插入空行？

Answer 1

删除min-height: 300px;并使用新行作为起始值初始化编辑器：

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
});

目前，CodeMirror的value选项似乎对最高版本2.21没有影响。初始化后使用setValue()可以轻松绕过这个：

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

editor.setValue(startingValue);

注意：确保不要设置autoClearEmptyLines: true因为它会发生冲突并取消插入的空行。

Answer 2

所以，我得到了解决方案。在任何原因编辑器没有从配置选项中获取value所以我设置后面的值。 @Eliran谢谢，我用你的方法来设定价值。

editor.setValue(startingValue);

<强>样本

http://jsfiddle.net/vujLv/1/

Answer 3

editor.setValue( value + "\n".repeat(10) )

Answer 4

这是我的方法，此方法在现有内容之后添加行，直到达到所需的行数。然后，我们需要一个事件来防止用户删除最小行数以下的行。

js：

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

// set minimum number of lines
var lineHeight = 22 // the height of a line
var minLines = Math.round($('.CodeMirror').height() / lineHeight ); 
editor.focus();
editor.setCursor(editor.lineCount(), 0); // Set the cursor at the end of existing content
var lineCount = editor.lineCount(); // current number of lines
var n = minLines - lineCount; // how many lines we need
for(i = 0; i < n; i++) {
    editor.replaceRange("\n", { line : editor.getCursor().line});
    line++;
}

$(document).on('keydown', '.CodeMirror', function(e, change) {
    var content = $(this).closest('.content'); // whatever contains your codemirror
    var editor = content[0].editor;
    var minLines = $('#code').data('minLines'); // minimum number of lines allowed
    var lineCount = editor.lineCount(); // current number of lines

    var line = editor.getCursor().line;
    var ch = editor.getCursor().ch;

    if (lineCount <= minLines) { // if number of lines is less than or equal to the amount that we want...
        if ((e.which === 8)) { // if we press backspace
            var n = minLines - lineCount;
            var line = editor.getCursor().line;
            for(i = 0; i < n; i++) {
                editor.replaceRange("\n", { line });
                line++;
            }
            var lineContent = editor.getLine(line);
            if (lineContent.length == 0) { // if the current line has no content
                editor.setCursor({line: line - 1});
            }
        }
    }
});

css：

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

这里是example

Codemirror - 最小行数

4 个答案: