Question

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

或者如果它不可能，我想设置最小 - 最大行，我找到了这个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()

Answer 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);
});

Answer 2

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

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

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

＆＃13;

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;
	}
	
} );

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

如何使ACE编辑器像html的textarea一样手动调整大小

2 个答案: