使 ACE 编辑器可调整大小答案

【问题标题】：Making ACE editor resizable使 ACE 编辑器可调整大小
【发布时间】：2015-02-16 12:19:09
【问题描述】：

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

【问题讨论】：

标签： ace-editor

【解决方案1】：

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

    editor.setAutoScrollEditorIntoView(true);

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

【讨论】：

【解决方案2】：

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

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

在咖啡本中：

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

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

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

【讨论】：

是的！这是纯 CSS 解决方案。这是一个演示jsfiddle.net/6b2tfspe/1

【解决方案3】：

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

这是我使用 jQuery UI 或任何其他额外的库（因为那只是额外的膨胀）来调整 Ace 编辑器窗口大小而不抖动的解决方案。

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：