如何使 ACE Editor 像 html textarea 一样手动调整大小答案

【问题标题】：How to make ACE Editor manually resizable just like html's textarea如何使 ACE Editor 像 html textarea 一样手动调整大小
【发布时间】：2015-01-13 04:17:36
【问题描述】：

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

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

或者，如果不可能，我想设置 min-max 行出现，我找到了这个 demo，但似乎 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()

【问题讨论】：

标签： jquery twitter-bootstrap ace-editor

【解决方案1】：

从 latest build 更新内置 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);
});

【讨论】：

【解决方案2】：

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

拖动是由一个 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/

【讨论】：