CodeMirror：如何限制编辑器的高度

Question

我正在使用CodeMirror在网页上显示一些代码。但是当我初始化CodeMirror编辑器时，编辑器的高度远远超过代码行数。请查看此处的fiddle或下面的图片以了解我的意思 以下是创建CodeMirror编辑器的代码。

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

我读过codemirror的文档，但是无法确定哪个属性控制高度。

请帮助我解决这个问题。

- Nitiraj

Answer 1

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

如果您希望编辑器高度与其内容的高度相对应，请参见此演示。

- Marijn

Answer 2

可能会对某些人有所帮助。

<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%");

- Gero

Answer 3

如果您查看您的代码片段，会发现CSS中有一个定义高度的条目。

.CodeMirror {


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

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

- Bala