Making ACE editor resizable

Question

Is there an option to add a handle to the ACE editor window for making the size of the editor window changeable by the enduser? I tried to use interactjs.io and applied resizable(true) to the .ace_content class but without an effect. What is the preferred way here?

Answer 1

At least from version 1.2.3+ (I haven't tried previous ones), you could use:

    editor.setAutoScrollEditorIntoView(true);

Your Ace editor will fill its container.

Answer 2

This is an old question, but here's a simple workaround that worked for me:

editor.resize();
editor.renderer.updateFull();

Answer 3

You can do(slim language):

.editor style="resize:vertical; overflow:auto;"

And in coffesscript:

$ ->
  ace.config.set('basePath', '/assets/ace-builds/src')
  $('.editor').each ->
    editor = ace.edit(this)

And fire this event when resizing div:

# make editor resizable
window.dispatchEvent(new Event('resize'))

Answer 4

All of the answers on here are specific to handling the resize in JS, but none of them address how you could actually add or setup resizing (as using CSS3 resize attribute will be hidden behind scrollbar)

Here's my solution to resizing the Ace Editor window without jitter, using jQuery UI, or any other additional libs (as that is just additional bloat).

Dragging is handled by a 2px tall div, which on mousedown sets opacity to 0 on the editor, and then back to 1 on mouseup.

This essentially results in the wrapper div showing during the dragging, and then hidden afterwards. Profit!

var editor = ace.edit( "smyles_editor" );
var dragging = false;
var wpoffset = 0;

// If using WordPress uncomment line below as we have to
// 32px for admin bar, minus 1px to center in 2px slider bar
// wpoffset = 31;

editor.setTheme("ace/theme/monokai");
// inline must be true to syntax highlight PHP without opening <?php tag
editor.getSession().setMode( { path: "ace/mode/php", inline: true } );
                  
$( '#smyles_dragbar' ).mousedown( function ( e ) {
	e.preventDefault();
	window.dragging = true;

	var smyles_editor = $( '#smyles_editor' );
	var top_offset = smyles_editor.offset().top - wpoffset;

	// Set editor opacity to 0 to make transparent so our wrapper div shows
	smyles_editor.css( 'opacity', 0 );

	// handle mouse movement
	$( document ).mousemove( function ( e ) {

		var actualY = e.pageY - wpoffset;
		// editor height
		var eheight = actualY - top_offset;
		
		// Set wrapper height
		$( '#smyles_editor_wrap' ).css( 'height', eheight);
		
		// Set dragbar opacity while dragging (set to 0 to not show)
		$( '#smyles_dragbar' ).css( 'opacity', 0.15 );
		
	} );

} );

$( document ).mouseup( function ( e ) {

	if ( window.dragging )
	{
		var smyles_editor = $( '#smyles_editor' );

		var actualY = e.pageY - wpoffset;
		var top_offset = smyles_editor.offset().top - wpoffset;
		var eheight = actualY - top_offset;

		$( document ).unbind( 'mousemove' );
		
		// Set dragbar opacity back to 1
		$( '#smyles_dragbar' ).css( 'opacity', 1 );
		
		// Set height on actual editor element, and opacity back to 1
		smyles_editor.css( 'height', eheight ).css( 'opacity', 1 );
		
		// Trigger ace editor resize()
		editor.resize();
		window.dragging = false;
	}
	
} );

body {
  margin: 40px;
}

#smyles_editor {
  height: 300px;
}

#smyles_editor_wrap {
	background-color: #cccccc;
	border-bottom: 1px solid #222222;
}

#smyles_dragbar {
	background-color: #222222;
	width: 100%;
	height: 2px;
	cursor: row-resize;
	opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>
  Vertically Resizable Ace Editor
</h2>
<br/>
<div id="smyles_editor_wrap">
	<div id="smyles_editor">function foo($awesome) {

	$x = 'Smyles make resizable window for youuuuu!';

	if( $awesome === TRUE ){
		$x = 'Enjoy!';
	}

	return x;
}</div>
	<div id="smyles_dragbar"></div>
</div>

http://jsfiddle.net/tripflex/knnv5e7s/

Answer 5

There is no out of box option for this, and css resizer does not work since it gets hidden behind scrollbar also editor can not detect when size of container dom node is changed.

However adding custom solution is very straightforward see https://github.com/ajaxorg/ace/blob/v1.1.8/lib/ace/ext/textarea.js#L248-L262 for a simple way of doing it or use jquery resizable like https://stackoverflow.com/a/24336105/1743328 suggests