Question

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

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

}）;

max-height无法正常工作

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

http://jsfiddle.net/qzjo4ejh/

Answer 1

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

Answer 2

这样的事情：

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 3

这对我有用。 CodeMirror-scroll导致它的大小太大。尽管文档说的是什么，但您不需要对viewportMargin做任何事情。

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

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

Fiddle

Codemirror自动调整到给定数量的行

3 个答案: