Codemirror 自动调整大小到给定的行数

Question

我正在尝试让 codemirror 自动调整到给定的行数或像素高度。达到最大尺寸后，小部件应添加滚动条。

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

});

最大高度不起作用

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

http://jsfiddle.net/qzjo4ejh/

Answer 1

类似的东西怎么样:

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 的大小。

Answer 2

您应该给 .CodeMirror 一个 height: auto 样式，并将 max-height 放在 .CodeMirror-scroll 上。 project page 上的嵌入式编辑器执行此操作（查看源代码，它就在顶部附近）。

Answer 3

这对我有用。 CodeMirror-scroll 导致它自身的大小过大。尽管文档怎么说，你不需要对 viewportMargin 做任何事情。

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

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

Fiddle

Codemirror 自动调整大小到给定的行数

Codemirror autoresize upto a given number of lines

html

javascript

codemirror