使ACE编辑器可调整大小

Question

是否可以选择向ACE编辑器窗口添加句柄,以使最终用户可以更改编辑器窗口的大小？我尝试使用interactjs.io并将resizable(true)应用于.ace_content类但没有效果.这里的首选方式是什么？

Answer 1

至少从版本1.2.3+(我还没有尝试过以前版本),您可以使用:

    editor.setAutoScrollEditorIntoView(true);

您的Ace编辑器将填充其容器.

Answer 2

你可以做（​​苗条的语言）：

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

在coffesscript中：

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

并在调整 div 大小时触发此事件：

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

Answer 3

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 4

这是一个老问题，但这是一个对我有用的简单解决方法：

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

Answer 5

没有开箱即用的选项，并且 css resizer 不起作用，因为它隐藏在滚动条后面，而且编辑器无法检测容器 dom 节点的大小何时更改。

但是，添加自定义解决方案非常简单，请参阅https://github.com/ajaxorg/ace/blob/v1.1.8/lib/ace/ext/textarea.js#L248-L262了解简单的方法或使用 jquery resizing就像/sf/answers/1703527381/建议