ACE 편집기 크기 조정 가능

Question

최종 사용자가 편집기 창 크기를 변경할 수 있도록 ACE 편집기 창에 핸들을 추가하는 옵션이 있습니까? ? interact_s.io를 사용하고 .ace_content 클래스에 크기 조정 (true)을 적용했지만 효과가 없었습니다. 여기서 선호하는 방법은 무엇입니까?

Answer 1

이 옵션은 기본적으로 제공되지 않으며 css resizer는 스크롤 막대 뒤에 숨겨져 있기 때문에 작동하지 않습니다. 편집기는 컨테이너 DOM 노드의 크기가 변경 될 때이를 감지 할 수 없습니다.

그러나 추가 사용자 지정 솔루션은 매우 간단 일을하는 간단한 방법을 https://github.com/ajaxorg/ace/blob/v1.1.8/lib/ace/ext/textarea.js#L248-L262를 볼 수 있습니다 그것을 또는 https://stackoverflow.com/a/24336105/1743328 같은 크기 조정을 사용 JQuery와 (나는 이전의 것들을 시도하지 않은) 이상 버전 1.2.3+에서

Answer 2

을 제안, 당신은 사용할 수 있습니다 :

editor.setAutoScrollEditorIntoView(true); 

귀하의 Ace 편집기는 컨테이너를 채울 것입니다.

Answer 3

당신은 (슬림 언어)을 수행 할 수 있습니다

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

그리고 coffesscript에서

:

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

그리고이 이벤트를 발생 크기 조정 사업부 :

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

Answer 4

에 답변 모두 여기 JS에서 크기 조정을 처리하는 방법에 대한 구체적인 내용은 없지만 실제로 CSS3를 사용하여 크기 조정을 추가하거나 설정하는 방법에 대해서는 다루지 않았습니다 resize 속성은 스크롤바 뒤에 숨겨져 있습니다.) jitter, jQuery UI 또는 다른 추가 라이브러리를 사용하여 Ace Editor 창 크기를 조정하는 방법은 제 솔루션입니다.

드래그는 2px 높이 div로 처리됩니다. 마우스가 올려 져있는 상태에서 편집기의 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) { 
 
\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>

이것은 또한 크기 조정에서 작동 http://jsfiddle.net/tripflex/knnv5e7s/