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

Question

我正在使用 codemirror to show some code on a webpage. But when I initialize the codemirror editor, the height of the editor is way more than the number of lines in the code. Please see this 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 文档，但无法弄清楚哪个属性控制高度。

请帮我解决这个问题

Answer 1

高度可以通过CSS设置（给.CodeMirrorclass一个height属性），或者调用编辑器的setSize方法。

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

Answer 2

如果您看到 fiddle，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%");

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

CodeMirror : how to limit height in editor

codemirror