Skip to content

Instantly share code, notes, and snippets.

@tureki

tureki/ace-editor.html

Created March 12, 2014 11:50
Show Gist options
  • Save tureki/9505359 to your computer and use it in GitHub Desktop.
Save tureki/9505359 to your computer and use it in GitHub Desktop.
Download ZIP
ace-editor auto height
Raw
ace-editor.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Editor</title>
</head>
<body>
<pre id="editor" style="width:100%;height:400px;">function foo(items) {
var i;
for (i = 0; i &lt; items.length; i++) {
alert("Ace Rocks " + items[i]);
}
}</pre>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function() {
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
editor.getSession().setMode("ace/mode/javascript");
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);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment