CodeMirror：如何在编辑器中限制高度

Question

我正在使用codemirror在网页上显示一些代码。但是当我初始化codemirror编辑器时，编辑器的高度远远超过代码中的行数。请see this fiddle或以下图片了解我在说什么以下是创建代码镜像编辑器的代码。

var myCodeArea = document.getElementById("codeArea");
var myCodeMirror = CodeMirror(function(elt) {
  myCodeArea.parentNode.replaceChild(elt, myCodeArea);
}, {value: myCodeArea.innerHTML,
   lineNumbers:true, mode:"javascript"});

我阅读了codemirror doc，但无法确定哪个属性控制高度。

请帮我解决这个问题

Answer 1

可以通过CSS设置高度（通过为.CodeMirror类提供height属性），或者通过调用编辑器的setSize方法。

如果您希望编辑器高度与其内容的高度相对应，请参阅this demo。

Answer 2

如果你看到你的小提琴，css中有一个定义高度的条目。

.CodeMirror {


 /* Set height, width, borders, and global font properties here */
    font-family: monospace;
    height: 300px;
}

您可以覆盖此css或使用codemirror的setSize（width，height）方法。

Answer 3

可以帮助别人。

<textarea class="form-control" id="exampleTextarea"></textarea>

var config, editor;

            config = {                  
                lineNumbers: true,
                mode: "text/javascript",
                lineWrapping: true,
                htmlMode: true,
                matchClosing: true,       
                indentWithTabs: true,
                readOnly: true
            };


            editor = CodeMirror.fromTextArea(document.getElementById("exampleTextarea"), config);
            editor.setSize(900,"100%");