Question

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

理想情况下它会起作用，所以当内容发生变化时，重新计算高度，但我会对刚刚在页面加载时设置的高度感到满意。

对于JavaScript新手，有人可以帮我弄清楚我是如何计算出代码长度，跨越多少行，新高度是什么以及如何更新DOM来反映这一点？

我在Google小组中找到了this suggestion，但我真的不明白它在做什么以及我如何调整高度。

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

Answer 1

（更新：我目前没有使用此功能，但我的回答可能已过时。为了尝试合并其他人提供的内容，我将回应他们提到的minLines和maxLines属性，例如

editor.setOptions({
    maxLines: Infinity
});

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

从历史的角度来看，旧答案是：

您引用的帖子只是假设它是一个固定宽度的字体，您知道它的字符高度，并且您知道文档中的行数。将它们相乘，您可以获得内容有多高的像素数。建议每次按下一个字符或剪切/粘贴（可能添加或删除行）时，您都可以使用JavaScript将这个具体的新大小应用于DOM样式的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);
}

Answer 2

Ace提供了一个选项：maxLines，您只需尝试：

editor.setOptions({
    maxLines: 15
});

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

Answer 3

更新：请参阅Dickeylth's answer。这一切仍然有效（人们似乎仍然觉得它很有用），但现在基本功能内置于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)

Answer 4

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

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

希望这有帮助。

Answer 5

你可以使用jQuery：

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

 $('#editor').css('height',rows_editor);

Answer 6

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

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

Answer 7

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

function adaptEditor() {
    document.getElementById('editor-container').style.height = window.innerHeight + 'px';
    editor.resize();
}
window.onresize = function(event) {
    adaptEditor();
};
adaptEditor();

Answer 8

这种变体对我来说效果更好，因为有时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();
   };

在Ace Cloud 9编辑器中自动调整内容的高度

8 个答案: