Esiste un'opzione per aggiungere un handle alla finestra dell'editor ACE per rendere modificabile la dimensione della finestra dell'editor dall'enduser? Ho provato a usare interactjs.io e applicato ridimensionabile (true) alla classe .ace_content ma senza effetto. Qual è il modo preferito qui?Ridimensionamento dell'editor ACE
Non esiste un'opzione non disponibile per questo e il resizer css non funziona poiché viene nascosto dietro la barra di scorrimento anche l'editor non è in grado di rilevare quando viene modificata la dimensione del nodo dom del contenitore.
Tuttavia l'aggiunta di soluzione personalizzata è molto semplice vedere https://github.com/ajaxorg/ace/blob/v1.1.8/lib/ace/ext/textarea.js#L248-L262 di un modo semplice per farlo o utilizzare jQuery ridimensionabile come https://stackoverflow.com/a/24336105/1743328 suggerisce
Almeno a partire dalla versione 1.2.3+ (non ho provato i precedenti), è possibile utilizzare:
editor.setAutoScrollEditorIntoView(true);
Il tuo editor Ace riempirà il suo contenitore.
Si può fare (lingua sottile):
.editor style="resize:vertical; overflow:auto;"
E in coffesscript:
$ ->
ace.config.set('basePath', '/assets/ace-builds/src')
$('.editor').each ->
editor = ace.edit(this)
e fuoco questo evento quando il ridimensionamento div:
# make editor resizable
window.dispatchEvent(new Event('resize'))
Tutte le risposte su qui sono specifici per gestire il ridimensionamento in JS, ma nessuno di loro affronta come potresti effettivamente aggiungere o impostare il ridimensionamento (come se si utilizzasse CSS3 l'attributo resize verrà nascosto dietro la barra di scorrimento)
Ecco la mia soluzione per ridimensionare la finestra di Ace Editor senza jitter, usando l'interfaccia utente di jQuery, o qualsiasi altra librerie aggiuntiva (in quanto è solo più ingigantita).
Il trascinamento è gestito da un div alto 2px, che il MouseDown imposta opacity-0 sull'editor, e poi di nuovo a 1 su MouseUp.
Ciò determina essenzialmente il div wrapper visualizzato durante il trascinamento e quindi nascosto in seguito. Profitto!
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>
Questo funziona anche sul ridimensionamento .. 1 – user3791775