Zmieniono rozmiar pliku w przypadku standardowego textarea

Question

Czy ktoś wie, jak zmienić rozmiar tekstu w ramce, tak jak w obszarze tekstowym?

Aby zmienić rozmiar tekstu, można przeciągnąć jego dolny róg łamania.

Wiem, że jest możliwe dla html divs (patrz div resizable like text-area), ale nie udało mi się osiągnąć tego samego na lustrze kodu.

Answer 1

Niektóre Googling sugeruje, że jest not supported in CodeMirror ale można achieve it z jQuery UI:

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

Answer 2

Co próbowaliście?

Właśnie ściągnąłem migawkę rozwojowego CodeMirror z http://codemirror.net/

Running complete.html z katalogu demo ma ładny Resizeable obszar tekstowy (w przeglądarce Chrome). W rzeczywistości przynajmniej kilka innych wersji demonstracyjnych ma również tekstery resizeable.

Jeśli to nie rozwiąże problemu, zaktualizuj go, podając bardziej szczegółowe informacje o tym, co próbowałeś, a co nie.

Answer 3

zrobiłem this little example.

Należy pamiętać, że zmienia się rozmiar tylko w pionie, co prawdopodobnie jest tym, czego naprawdę chcesz? Pozioma zdolność zmiany rozmiaru normalnego textarea ma tendencję do łamania układów - zazwyczaj łatwiej jest znaleźć układ, w którym edytor ma stałą szerokość, a zawartość pod nim zostanie zmniejszona, jeśli zmienisz rozmiar.

Nie widziałem projektu, w którym zamierzasz to dopasować, więc zgaduję.

Nie powinno być zbyt trudno to zmienić i uzyskać działający widżet zmiany rozmiaru, który działa w obu kierunkach, jeśli tego właśnie chcesz.

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); 
    }); 
} 

Jeśli ktoś jest zainteresowany krótsze i bardziej wersją jQuery z @ mindplay.dk odpowiedzi (btw. Dzięki za to).