我正在使用jquery-ace里面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()
最佳答案
花了很多时间试图找出一种方法来调整 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>
关于jquery - 如何让 ACE Editor 手动调整大小,就像 html 的文本区域一样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27914804/