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

【问题标题】：CodeMirror : how to limit height in editorCodeMirror：如何在编辑器中限制高度
【发布时间】：2015-04-07 07:56:16
【问题描述】：

我正在使用codemirror 在网页上显示一些代码。但是当我初始化 codemirror 编辑器时，编辑器的高度远远超过代码中的行数。请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 文档，但无法确定哪个属性控制高度。

请帮我解决这个问题

【问题讨论】：

标签： codemirror

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

.CodeMirror {


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

您可以覆盖此 css 或使用 codemirror 的 setSize(width,height) 方法。

【讨论】：

【解决方案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%");

【讨论】：