Größe des ACE-Editors ändern

Question

Gibt es eine Option zum Hinzufügen eines Handle zum ACE-Editorfenster, um die Größe des Editorfensters vom Endbenutzer veränderbar zu machen? Ich habe versucht, interactjs.io zu verwenden und resizable (wahr) auf die .ace_content-Klasse angewendet, aber ohne einen Effekt. Was ist der bevorzugte Weg hier?

Answer 1

Es gibt keine Out-of-Box-Option dafür, und CSS-Resizer funktioniert nicht, da es hinter der Bildlaufleiste versteckt auch Editor kann nicht erkennen, wenn die Größe des Container Dom Knoten geändert wird.

jedoch das Hinzufügen von benutzerdefinierter Lösung ist sehr einfach https://github.com/ajaxorg/ace/blob/v1.1.8/lib/ace/ext/textarea.js#L248-L262 für eine einfache Art und Weise, es zu tun oder Verwendung jquery resizable wie https://stackoverflow.com/a/24336105/1743328 schlägt

Answer 2

Mindestens ab Version 1.2.3+ sehen (I vorherige nicht versucht haben), Sie könnten verwenden:

editor.setAutoScrollEditorIntoView(true); 

Ihr Ace-Editor wird seinen Container füllen.

Answer 3

Sie können tun (slim Sprache):

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

Und in coffesscript:

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

Und dieses Ereignis ausgelöst, wenn die Größenänderung div:

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

Answer 4

alle Antworten auf Hier wird speziell auf die Größenänderung in JS eingegangen, aber keine davon behandelt, wie Sie die Größenänderung tatsächlich hinzufügen oder einrichten können (wie bei Verwendung von CSS3) Größenänderungsattribut wird hinter der Bildlaufleiste verborgen)

Hier ist meine Lösung zum Ändern der Größe des Ace Editor-Fensters ohne Jitter, mit jQuery UI oder anderen zusätzlichen Bibliotheken (da das nur zusätzliche Bloat ist).

Ziehen wird von einem 2px großen div behandelt, das auf mousedown setzt opacity zu 0 auf dem Editor, und dann zurück zu 1 auf mouseup.

Dies führt im Wesentlichen dazu, dass das Wrapper-Div beim Ziehen angezeigt und anschließend ausgeblendet wird. Profitieren!

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/