कोडेमियरर-टेक्स्टरेरा मानक टेक्स्टरेरा

Question

जैसे आकार बदलने योग्य है क्या कोई जानता है कि कैसे कोडमिरर टेक्स्टरेरा टेक्स्ट-क्षेत्र की तरह आकार बदल सकता है?

ताकि कोडमिरर टेक्स्टरेरा को अपने नीचे नीचे हथियार कोने खींचकर आकार बदल दिया जा सके।

मुझे पता है कि यह HTML divs के लिए संभव है (div resizable like text-area देखें) लेकिन मैं कोड दर्पण पर एक ही चीज़ प्राप्त करने में कामयाब नहीं रहा हूं।

Answer 1

कुछ Googling चलता है कि यह not supported in CodeMirror है, लेकिन आप achieve itjQuery UI साथ कर सकते हैं:

var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 
    lineNumbers: true, 
}); 
$('.CodeMirror').resizable({ 
    resize: function() { 
    editor.setSize($(this).width(), $(this).height()); 
    } 
}); 

Answer 2

आपने क्या प्रयास किया है?

मैं सिर्फ http://codemirror.net/

डेमो निर्देशिका से complete.html रनिंग से CodeMirror के विकास स्नैपशॉट डाउनलोड किया (मेरे क्रोम ब्राउज़र में) एक अच्छा resizeable पाठ क्षेत्र है। वास्तव में कम से कम कुछ अन्य डेमो में आकार बदलने योग्य टेक्स्टरेज़ भी होते हैं।

यदि यह आपके प्रश्न का उत्तर नहीं देता है, तो कृपया जो आपने कोशिश की है और क्या काम नहीं करता है, उसके बारे में अधिक विशिष्ट जानकारी के साथ अपडेट करें।

Answer 3

मैं this little example बनाया है।

ध्यान दें कि यह केवल लंबवत आकार का है, जो शायद आप वास्तव में चाहते हैं? सामान्य टेक्स्टरेरा की क्षैतिज आकार बदलने की क्षमता लेआउट को तोड़ती है - आमतौर पर एक लेआउट के साथ आने के लिए यह बहुत आसान होता है जहां संपादक की निश्चित चौड़ाई होती है और यदि आप आकार बदलते हैं तो नीचे दी गई सामग्री को धक्का दिया जाता है।

मैंने उस डिज़ाइन को नहीं देखा है जिसमें आप फिट होने का इरादा रखते हैं, इसलिए मैं अनुमान लगा रहा हूं।

इसे संशोधित करना बहुत मुश्किल नहीं होना चाहिए और एक कामकाजी आकार बदलने वाला विजेट प्राप्त करना चाहिए जो दोनों दिशाओं में काम करता है, हालांकि, यदि आप यही चाहते हैं।

Answer 4

let CodeMirrorCustomResize = (params) => { 
    var start_x, start_y, start_h, 
     minHeight = params && params.minHeight ? params.minHeight : 150, 
     resizableObj = params && params.resizableObj ? params.resizableObj : '.handle' 

    let onDrag = (e) => { 
     sqlEditor.setSize(null, `${Math.max(minHeight, (start_h + e.pageY - start_y))}px`); 
    } 

    let onRelease = (e) => { 
     $('body').off("mousemove", onDrag); 
     $(window).off("mouseup", onRelease); 
    } 

    $('body').on("mousedown", resizableObj, (e) => { 
     start_x = e.pageX; 
     start_y = e.pageY; 
     start_h = $('.CodeMirror').height(); 

     $('body').on("mousemove", onDrag); 
     $(window).on("mouseup", onRelease); 
    }); 
} 

किसी @ mindplay.dk जवाब के छोटे और अधिक jQuery संस्करण में रुचि रखता है, तो (Btw। इस के लिए धन्यवाद)।