Automatically adjust height to contents in Ace Cloud 9 editor

user_97650 0
Viewed 44484

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.

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()
ace-editor javascript
9 Answers

I had the same problem but found out that it was so simple to automatically adjust the height by getting the height of its parent element and give it to the #editor and trigger a resize by editor.resize(). It just worked like a charm! bellow is the code i used:

let editor = ace.edit('editor'), $editorWrapper = $('.editor-wrapper');

$('#editor').height($editorWrapper.height());
 editor.resize();

Well, I did this when I was trying to toggle maximize feature on the editor.

user_102095910
Related