在 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?

我在 Google 群组中找到了此建议，但是我真的不明白它在做什么以及我如何让它调整高度.

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屋！