在Ace Cloud 9编辑器中自动调整高度
我试图将Ace编辑器添加到页面，但是我不知道如何根据其内容的长度自动设置高度。
理想情况下，它会工作，所以当内容改变的高度重新计算，但我会很高兴刚刚在页面加载设置的高度。
对于JavaScript新手，有人可以帮我弄清楚我是如何处理代码的长度，跨越多less行，新的高度是多less，以及如何更新DOM来反映这一点？
我在Google小组中发现了这个build议 ，但是我不太了解它在做什么以及如何调整高度。
editor.getSession().getDocument().getLength() * editor.renderer.lineHeight + editor.renderer.scrollBar.getWidth() （更新：目前我还没有处理这个问题，但是我的答案可能已经过时了，为了尝试并纳入其他人所提供的内容，我会回应他们提到的minLines和maxLines属性，例如
editor.setOptions({ maxLines: Infinity });
显然，无限是“不是一个好主意，因为即使是非常大的文档，它也会禁用虚拟视口。” 所以select一个限制可能会更好。
为了历史的缘故，旧的回答是：
你所引用的文章只是假设它是一个固定宽度的字体，其字符高度你知道，并且你知道文档中的行数。 将它们相乘，就可以得到一个像素数，表示内容的高度。 build议每次按下某个字符或发生剪切/粘贴（可能会添加或删除线条），您都可以使用JavaScript将这个具体的新大小应用到您的DOM中使用CSS样式的项目。
（他们把一个滚动条的“宽度”放到一个高度计算中，我真的不能告诉你是否有一个基本原理，我会让别人把这个部分弄清楚。
无论如何…如果你有软包装，跨越的渲染屏幕线的数量可能比文件中的“实际”线的数量多。 所以最好使用editor.getSession().getScreenLength()不是editor.getSession().getDocument().getLength() 。
我把编辑器（位置：绝对）放在一个部分（位置：相对）内，这是生活在该部分的唯一项目。 这个代码现在看起来很适合我，如果我了解更多，我会更新它。
（注意：我对StackOverflow提供的代码的一般理解是，我们不会在Java和Oracle的8行崩溃中结束 ，你可以使用，但是因为我是通过电子邮件发送的关于这一点，我已经为这些类似的微不足道的行添加了一个明确的较less限制性的许可条款：-P）
// The following code snippet is released under the MIT license, // -or- FreeBSD license, -or- an unrestrictive license of your // choice including CC-ZERO or public domain. // // (those are GPL and Apache compatible, in any case) // // http://en.wikipedia.org/wiki/MIT_License // http://en.wikipedia.org/wiki/BSD_licenses $(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提供了一个选项： maxLines以便您可以简单地尝试：
editor.setOptions({ maxLines: 15 });
更新：见Dickeylth的答案 。 这一切仍然有效（人们似乎仍然觉得它很有用），但是现在ACE的基本function已经被embedded到了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)
我认为一个解决scheme可能是计算编辑器中的行数，然后调整它的大小来适应这些行：
editor.setOptions({ maxLines: editor.session.getLength() });
希望这可以帮助。
我同意接受的答案，除了我更喜欢editor.getSession().getScreenLength() 。
问题是，如果启用了换行模式，一个长行可能会分成多行。 因此，您将无法通过editor.getSession().getDocument().getLength()获取正确的行数。
你可以使用jQuery：
var length_editor = editor.session.getLength(); var rows_editor = length_editor * 17; $('#editor').css('height',rows_editor);
这个变体对我有用，因为有时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(); };
我在纯JavaScript中的方法（用正确的编号replaceeditor-container ）。
function adaptEditor() { document.getElementById('editor-container').style.height = window.innerHeight + 'px'; editor.resize(); } window.onresize = function(event) { adaptEditor(); }; adaptEditor();
