在Ace Cloud 9编辑器中自动调整内容的高度 [英] Automatically adjust height to contents in Ace Cloud 9 editor

问题描述

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

I'm trying to add the Ace editor to a page, but I don't know how to get the height to be set automatically based on the length of its contents.

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

Ideally it would work so when the content changes the height is recalculated, but I would be happy with the height just being set on page load.

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

For a JavaScript novice can someone help me figure out how I work out the length of the code, how many lines it spans, what the new height is and how I update the DOM to reflect this?

我发现这个建议，但我真的不明白它在做什么以及如何调整高度。

I found this suggestion in a Google group, but I don't really understand what it's doing and how I get it to adjust the height.

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

解决方案

（更新：我现在不是在用这个，但我的回答可能已经过时了。为了尝试合并其他人提供的内容，我将回应他们提到的minLines和maxLines属性，例如

editor.setOptions({
    maxLines: Infinity
});

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

出于历史原因，旧答案是：

For history's sake, the old answer was:

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

The post you cite is just operating on the assumption that it's a fixed width font whose character height you know, and that you know the number of lines in the document. Multiply that together you get a pixel count for how tall the content is. The suggestion is that every time a character is pressed or a cut/paste happens (which may add or remove lines), you use JavaScript to apply this concrete new size to the items in your DOM with CSS styles.

（他们将滚动条的宽度投入高度计算中，老实说我不能告诉你背后是否存在理由。我会让某人如果你有软包装，那么跨越的渲染屏幕线的数量可能会超过这个数字，否则就会计算出来。）

文件中的实际行。所以最好使用 editor.getSession（）。getScreenLength（）而不是 editor.getSession（）。getDocument（）。getLength（）。

Anyway...if you have soft wrap on, the number of rendered screen lines spanned may be more than the number of "actual" lines in the document. So it is better to use editor.getSession().getScreenLength() than editor.getSession().getDocument().getLength().

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

I put the editor (position: absolute) inside of a section (position: relative), and it's the only item living in that section. This code is seemingly working for me for now, I'll update it if I learn more...!

$(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);
}

这篇关于在Ace Cloud 9编辑器中自动调整内容的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！