如何使 ACE 编辑器可手动调整大小，就像 html 的文本区域一样

Question

我在twitter-bootstrap modal中使用jquery-ace。

有没有办法使 ace 编辑器可以在不使用 jquery-ui 的情况下由用户调整大小。

或者如果不可能，我想设置最小-最大行出现，我找到了这个演示，但似乎 jquery-ace 被错误地记录了，因为我无法访问要调用ace对象setOption

var decorator = $('.my-code-area').data('ace');
var aceInstance = decorator.ace; // this is wrong
// decorator.editor.ace --> this is more correct but it doesn't have setOption()

Answer 1

花了大量时间试图找出一种方法来调整 Ace 编辑器窗口的大小而不会抖动，使用 jQuery UI 或任何其他额外的库（因为这只是额外的膨胀），所以我最终想出了我自己的自定义解决方案。

拖动由一个 2px 高的div 处理，在鼠标按下时opacity设置为在编辑器上0，然后在鼠标向上时返回到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 2

从最新版本更新内置 ace 可以解决此问题。

这是代码很长时自动调整大小的工作示例

var aces = el.find('textarea.code.json:enabled')
aces.ace({ theme: 'eclipse', lang: 'json' }).each(function(idx,editor){
    var ace = $(editor).data('ace').editor.ace;
    ace.setOption("maxLines", 10);
    ace.setOption("minLines", 2);
});