jquery-ace 안에 twitter-bootstrap 모달을 사용하고 있습니다.ACE 편집기를 html의 텍스트 영역처럼 수동으로 크기를 조절할 수있게 만드는 방법
jquery-ui를 사용하지 않고 사용자가 에이스 편집기를 크기 조정할 수있는 방법이 있습니까?
아니면 가능하지, 난이 최소 - 최대 라인 표시를 설정하려면,이 demo을 발견하지만, 내가 호출 할 ace 개체에 대한 액세스를 얻을 수 없기 때문에 JQuery와 에이스가 잘못 문서화 것으로 보인다 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를 UI를 사용하여 지터없이 에이스 편집기 창 크기를 조정하는 방법을 알아 내려고 시간의 톤 소비 또는 기타 코드가 긴 경우 자동 크기 조정에 대한 예를 일하고있어 추가 libs (그냥 추가로 부 풀리는 것입니다), 그래서 그것에 대한 내 자신의 사용자 지정 솔루션을 들고 결국.
드래그은 mousedown에 mouseup에 다시 1에 다음 에디터에 0에 opacity을 설정하고, 2 픽셀 높이 사업부에 의해 처리됩니다.
이것은 래퍼 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) {
\t e.preventDefault();
\t window.dragging = true;
\t var smyles_editor = $('#smyles_editor');
\t var top_offset = smyles_editor.offset().top - wpoffset;
\t // Set editor opacity to 0 to make transparent so our wrapper div shows
\t smyles_editor.css('opacity', 0);
\t // handle mouse movement
\t $(document).mousemove(function (e) {
\t \t var actualY = e.pageY - wpoffset;
\t \t // editor height
\t \t var eheight = actualY - top_offset;
\t \t
\t \t // Set wrapper height
\t \t $('#smyles_editor_wrap').css('height', eheight);
\t \t
\t \t // Set dragbar opacity while dragging (set to 0 to not show)
\t \t $('#smyles_dragbar').css('opacity', 0.15);
\t \t
\t });
});
$(document).mouseup(function (e) {
\t if (window.dragging)
\t {
\t \t var smyles_editor = $('#smyles_editor');
\t \t var actualY = e.pageY - wpoffset;
\t \t var top_offset = smyles_editor.offset().top - wpoffset;
\t \t var eheight = actualY - top_offset;
\t \t $(document).unbind('mousemove');
\t \t
\t \t // Set dragbar opacity back to 1
\t \t $('#smyles_dragbar').css('opacity', 1);
\t \t
\t \t // Set height on actual editor element, and opacity back to 1
\t \t smyles_editor.css('height', eheight).css('opacity', 1);
\t \t
\t \t // Trigger ace editor resize()
\t \t editor.resize();
\t \t window.dragging = false;
\t }
\t
});body {
margin: 40px;
}
#smyles_editor {
height: 300px;
}
#smyles_editor_wrap {
\t background-color: #cccccc;
\t border-bottom: 1px solid #222222;
}
#smyles_dragbar {
\t background-color: #222222;
\t width: 100%;
\t height: 2px;
\t cursor: row-resize;
\t 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">
\t <div id="smyles_editor">function foo($awesome) {
\t $x = 'Smyles make resizable window for youuuuu!';
\t if($awesome === TRUE){
\t \t $x = 'Enjoy!';
\t }
\t return x;
}</div>
\t <div id="smyles_dragbar"></div>
</div>latest build에서 기본 제공 에이스를 업데이트하면 문제가 해결됩니다. 여기
는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);
});