Javascript 在 Ace Cloud 9 编辑器中自动调整内容高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11584061/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Automatically adjust height to contents in Ace Cloud 9 editor
提问by limitlessloop
I'm trying to add the Ace editorto a page, but I don't know how to get the height to be set automatically based on the length of its contents.
我正在尝试将Ace 编辑器添加到页面，但我不知道如何根据其内容的长度自动设置高度。
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.
理想情况下，它会起作用，因此当内容更改时会重新计算高度，但我会很高兴在页面加载时设置高度。
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?
对于 JavaScript 新手，有人可以帮助我弄清楚如何计算代码的长度、它跨越多少行、新高度是多少以及我如何更新 DOM 以反映这一点？
I found this suggestionin a Google group, but I don't really understand what it's doing and how I get it to adjust the height.
我在 Google 小组中找到了这个建议，但我真的不明白它在做什么以及如何让它调整高度。
editor.getSession().getDocument().getLength() *
editor.renderer.lineHeight + editor.renderer.scrollBar.getWidth()
回答by HostileFork says dont trust SE
(UPDATE: I'm not working with this at the moment, but my answer may be out of date. To try and incorporate what others have provided, I'll echo their mention of the minLines and maxLines properties, e.g.
（更新：我目前没有处理这个问题，但我的答案可能已经过时了。为了尝试合并其他人提供的内容，我将回应他们提到的 minLines 和 maxLines 属性，例如
editor.setOptions({
maxLines: Infinity
});
Apparently infinity is "not a very good idea, since it will disable virtual viewport even for very large documents." So picking a limit may be better.
显然无穷大“不是一个好主意，因为即使对于非常大的文档，它也会禁用虚拟视口。” 所以选择一个限制可能会更好。
For history's sake, the old answer was:
为了历史的缘故，旧的答案是：
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.
您引用的帖子只是假设它是一种固定宽度的字体，您知道其字符高度，并且您知道文档中的行数。将其相乘，您将得到内容高度的像素数。建议是每次按下字符或剪切/粘贴（可能添加或删除行）时，您都使用 JavaScript 将这个具体的新大小应用到具有 CSS 样式的 DOM 中的项目。
(They throw in the "width" of a scrollbar into a height calculation, and I honestly can't tell you if there's a rationale behind that or not. I'll let someone else figure that part out.)
（他们将滚动条的“宽度”放入高度计算中，老实说，我无法告诉您这背后是否有任何理由。我会让其他人弄清楚那部分。）
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().
无论如何......如果你有软换行，跨越的渲染屏幕行数可能超过文档中“实际”行数。所以使用editor.getSession().getScreenLength()比使用更好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);
}
回答by Dickeylth
Ace provides an option: maxLinesso that you can simply try:
Ace 提供了一个选项：maxLines以便您可以简单地尝试：
editor.setOptions({
maxLines: 15
});
回答by Carl Smith
Update: See Dickeylth's answer. This all still works (and people still seem to find it useful), but the basic functionality is built into ACE now.
更新：请参阅Dickeylth 的回答。这一切仍然有效（人们似乎仍然觉得它很有用），但基本功能现在已内置到 ACE 中。
To "automatically adjust height to contents in Ace Cloud9 editor", you just need to resize the editor to fit the div that contains it, whenever the content is edited. Assuming you started with <div id=editor>...
要“在 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();
});
You resize the div the editor lives in, then call editor.resizeto get the editor to refill the div.
您调整编辑器所在 div 的大小，然后调用editor.resize让编辑器重新填充 div。
If you paste content with long lines, with ACE set to wrap lines, the number of new lines and actual rendered lines will differ, so the editor will scroll. This code will fix that, but you will get horizontal scrolling instead.
如果粘贴长行内容，ACE 设置为换行，则新行数和实际渲染行数将不同，因此编辑器将滚动。这段代码会解决这个问题，但你会得到水平滚动。
editor.getSession().setUseWrapMode(false)
回答by René Fernández
I think that a solution might be counting the number of lines in the editor and then resize it to fit these lines:
我认为一个解决方案可能是计算编辑器中的行数，然后调整它的大小以适应这些行：
editor.setOptions({
maxLines: editor.session.getLength()
});
Hope this helps.
希望这可以帮助。
回答by JohnDoe Doe
You can use jQuery:
您可以使用 jQuery：
var length_editor = editor.session.getLength();
var rows_editor = length_editor * 17;
$('#editor').css('height',rows_editor);
回答by AKFish
I agree with the accepted answer, except that I would prefer editor.getSession().getScreenLength().
我同意接受的答案，但我更喜欢editor.getSession().getScreenLength().
The issue is that if you enable wrap mode, a long line may break into multiple lines. Thus you will not be able to get correct line count with editor.getSession().getDocument().getLength().
问题是，如果启用换行模式，长行可能会分成多行。因此，您将无法获得正确的行数editor.getSession().getDocument().getLength()。
回答by Fabien Sa
My method in pure JavaScript (replace editor-containerwith the right id).
我的纯 JavaScript 方法（editor-container用正确的 id替换）。
function adaptEditor() {
document.getElementById('editor-container').style.height = window.innerHeight + 'px';
editor.resize();
}
window.onresize = function(event) {
adaptEditor();
};
adaptEditor();
回答by Paul
This variant works better for me as sometimes the editor.renderer.lineHeight returns 1
这个变体对我来说效果更好，因为有时 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();
};
