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

Question

我正在使用 jquery-ace inside twitter-bootstrap 模式。

有没有办法让用户在不使用 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 编辑器 window 的大小而不抖动，使用 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/

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

How to make ACE Editor manually resizable just like html's textarea

jquery

twitter-bootstrap

ace-editor