67

我正在尝试将Ace 编辑器添加到页面，但我不知道如何根据其内容的长度自动设置高度。

理想情况下，它会起作用，因此当内容更改时会重新计算高度，但我会对在页面加载时设置的高度感到满意。

对于 JavaScript 新手，谁能帮我弄清楚我如何计算代码的长度、它跨越多少行、新的高度是多少以及我如何更新 DOM 以反映这一点？

我在一个谷歌小组中找到了这个建议，但我真的不明白它在做什么以及我如何让它来调整高度。

editor.getSession().getDocument().getLength() *
editor.renderer.lineHeight + editor.renderer.scrollBar.getWidth()
4

9 回答 9

98

（更新：我目前没有处理这个问题，但我的回答可能已经过时了。为了尝试合并其他人提供的内容，我会回应他们提到的 minLines 和 maxLines 属性，例如

editor.setOptions({
    maxLines: Infinity
});

显然，无穷大“不是一个好主意，因为即使对于非常大的文档，它也会禁用虚拟视口。” 所以选择一个限制可能会更好。

为了历史的缘故，旧的答案是：

您引用的帖子只是假设它是一种固定宽度的字体，您知道其字符高度，并且您知道文档中的行数。将其相乘，您将获得内容高度的像素数。建议是每次按下字符或发生剪切/粘贴（可能会添加或删除行）时，您使用 JavaScript 将这个具体的新大小应用到具有 CSS 样式的 DOM 中的项目。

（他们将滚动条的“宽度”投入到高度计算中，老实说，我不能告诉你这背后是否有理由。我会让其他人弄清楚这部分。）

无论如何...如果您启用了软包装，则跨越的渲染屏幕行数可能会超过文档中“实际”行数。所以使用起来editor.getSession().getScreenLength()比editor.getSession().getDocument().getLength().

我将编辑器（位置：绝对）放在一个部分（位置：相对）内，它是该部分中唯一的项目。这段代码现在似乎对我有用，如果我了解更多信息，我会更新它......！

$(document).ready(function(){

    var heightUpdateFunction = function() {

        // http://stackoverflow.com/questions/11584061/
        var newHeight =
                  editor.getSession().getScreenLength()
                  * editor.renderer.lineHeight
                  + editor.renderer.scrollBar.getWidth();

        $('#editor').height(newHeight.toString() + "px");
        $('#editor-section').height(newHeight.toString() + "px");

        // This call is required for the editor to fix all of
        // its inner structure for adapting to a change in size
        editor.resize();
    };

    // Set initial size to match initial content
    heightUpdateFunction();

    // Whenever a change happens inside the ACE editor, update
    // the size again
    editor.getSession().on('change', heightUpdateFunction);
}
于 2012-11-27T07:21:23.403 回答
35

Ace 提供了一个选项：maxLines以便您可以简单地尝试：

editor.setOptions({
    maxLines: 15
});

http://jsfiddle.net/cirosantilli/9xdkszbz/

于 2013-10-08T07:24:19.900 回答
13

更新：见Dickeylth 的回答。这一切仍然有效（而且人们似乎仍然觉得它很有用），但基本功能现在已内置在 ACE 中。

要“自动调整 Ace Cloud9 编辑器中内容的高度”，您只需在编辑内容时调整编辑器的大小以适应包含它的 div。假设您从<div id=editor>...开始

var editor = ace.edit("editor");                   // the editor object
var editorDiv = document.getElementById("editor");     // its container
var doc = editor.getSession().getDocument();  // a reference to the doc

editor.on("change", function() {
    var lineHeight = editor.renderer.lineHeight;
    editorDiv.style.height = lineHeight * doc.getLength() + "px";
    editor.resize();
});

您调整编辑器所在的 div 的大小，然后调用editor.resize让编辑器重新填充 div。

如果粘贴长行的内容，并且 ACE 设置为换行，则新行数和实际渲染行数会有所不同，因此编辑器会滚动。此代码将解决此问题，但您将获得水平滚动。

editor.getSession().setUseWrapMode(false)
于 2013-10-28T04:38:53.033 回答
7

我认为一个解决方案可能是计算编辑器中的行数，然后调整它的大小以适应这些行：

editor.setOptions({
     maxLines: editor.session.getLength()
});

希望这可以帮助。

于 2014-07-02T13:36:45.423 回答
2

您可以使用 jQuery：

 var length_editor = editor.session.getLength();
 var rows_editor = length_editor * 17;

 $('#editor').css('height',rows_editor);
于 2015-07-05T12:19:51.403 回答
1

我同意接受的答案，但我更喜欢editor.getSession().getScreenLength().

问题是，如果启用换行模式，长行可能会分成多行。因此，您将无法获得正确的行数editor.getSession().getDocument().getLength()。

于 2013-10-12T03:11:07.390 回答
0

我在纯 JavaScript 中的方法（替换editor-container为正确的 id）。

function adaptEditor() {
    document.getElementById('editor-container').style.height = window.innerHeight + 'px';
    editor.resize();
}
window.onresize = function(event) {
    adaptEditor();
};
adaptEditor();
于 2014-06-28T17:25:31.757 回答
0

这个变体对我来说效果更好，因为有时 editor.renderer.lineHeight 返回 1

    var resize = function() {
     var minHt = 16;
     var sl = editor.getSession().getScreenLength();
     var sw = editor.renderer.scrollBar.getWidth();
     var lh = Math.max(editor.renderer.lineHeight, minHt);
     var ht = Math.max(((sl * lh) + sw), minHt);
     $('#myEditorDiv').height(ht);
     editor.resize();
   };
于 2014-08-27T15:54:25.263 回答
0

我遇到了同样的问题，但发现通过获取其父元素的高度并将其提供给#editor并触发调整大小来自动调整高度非常简单editor.resize()。它就像一个魅力！下面是我使用的代码：

let editor = ace.edit('editor'), $editorWrapper = $('.editor-wrapper');

$('#editor').height($editorWrapper.height());
 editor.resize();

好吧，当我尝试在编辑器上切换最大化功能时，我这样做了。

于 2021-09-07T07:09:20.707 回答