Question

是否可以选择在ACE编辑器窗口中添加句柄以显示编辑器窗口的大小最终用户可以改变吗？我尝试使用interactjs.io并将resizable（true）应用于.ace_content类但没有效果。这里的首选方式是什么？

Answer 1

至少从版本1.2.3+开始（我还没有尝试过以前的版本），你可以使用：

    editor.setAutoScrollEditorIntoView(true);

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

Answer 2

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

但是，添加自定义解决方案非常简单，请参阅https://github.com/ajaxorg/ace/blob/v1.1.8/lib/ace/ext/textarea.js#L248-L262以获得一种简单的方法或使用jquery resizable，如https://stackoverflow.com/a/24336105/1743328建议

Answer 3

你可以做（苗条语言）：

.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 4

这里的所有答案都特定于处理JS中的resize，但没有一个解决你如何实际添加或设置大小调整（因为使用CSS3 resize属性将隐藏在滚动条后面）

这是我的解决方案，无需抖动，使用jQuery UI或任何其他附加库（因为这只是额外的膨胀）来调整Ace Editor窗口的大小。

拖动由一个2px高的div处理，在编辑器上将mousedown设置为opacity到0，然后在mouseup上返回1。

这实际上导致在拖动过程中显示包装div，然后隐藏。利润！

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

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

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

使ACE编辑器可调整大小

5 个答案: