एसीई संपादक का आकार बदलने योग्य

Question

क्या एडिटर संपादक विंडो में एक हैंडल जोड़ने के लिए कोई विकल्प है संपादक संपादक विंडो एंडयूसर द्वारा परिवर्तनीय करने के लिए? मैंने interactjs.io और लागू resizable (true) का उपयोग करने के लिए .ace_content कक्षा में लेकिन बिना किसी प्रभाव के। यहां पसंदीदा तरीका क्या है?

Answer 1

इसके लिए बॉक्स विकल्प से बाहर नहीं है, और सीएसएस रेजिज़र काम नहीं करता है क्योंकि यह स्क्रॉलबार के पीछे छिपा हुआ है, संपादक भी पता नहीं लगा सकता कि कंटेनर डोम नोड का आकार कब बदला जाता है।

हालांकि जोड़ने कस्टम समाधान बहुत स्पष्ट करने का एक आसान तरीका के लिए देख https://github.com/ajaxorg/ace/blob/v1.1.8/lib/ace/ext/textarea.js#L248-L262 है यह या उपयोग jQuery https://stackoverflow.com/a/24336105/1743328 की तरह आकार बदलने योग्य पता चलता है

Answer 2

संस्करण 1.2.3+ से कम से कम (मैं पिछले अभियानों प्रयास नहीं किया है), आप इसका उपयोग कर सकते हैं:

editor.setAutoScrollEditorIntoView(true); 

आपका ऐस संपादक इसके कंटेनर को भर देगा।

Answer 3

आप (स्लिम भाषा) कर सकते हैं:

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

और coffesscript में:

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

और यह ईवेंट सक्रिय करें आकार बदलने div:

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

Answer 4

पर सभी उत्तर यहां जेएस में आकार बदलने के लिए विशिष्ट हैं, लेकिन उनमें से कोई भी यह नहीं पता कि आप वास्तव में कैसे आकार बदल सकते हैं या सेटअप कर सकते हैं (CSS3 का उपयोग करते हुए आकार बदलने के लिए स्क्रॉलबार के पीछे छुपाया जाएगा)

jQuery UI, या किसी अन्य अतिरिक्त libs (जैसा कि केवल अतिरिक्त ब्लोट है) का उपयोग करके, जिटर के बिना ऐस संपादक विंडो का आकार बदलने का मेरा समाधान यहां है।

खींच एक 2px लंबा div, जो mousedown पर opacity0 के संपादक पर वापस 1 को mouseup पर सेट करें, और उसके द्वारा नियंत्रित किया जाता।

यह अनिवार्य रूप से ड्रैगिंग के दौरान दिखाए गए रैपर 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/