codemirror-textarea resizierbar wie ein Standard-Textbereich

Question

Weiß jemand, wie man ein Codemirror-Textfeld in der Größe eines Textbereichs ändert?

Damit die Größe des Codemirror-Textfelds geändert werden kann, indem die untere Grabber-Ecke gezogen wird.

Ich weiß, dass es für HTML divs möglich ist (siehe div resizable like text-area), aber ich habe es nicht geschafft, die gleiche Sache auf Code-Spiegel zu erreichen.

Answer 1

Einige googeln legt nahe, dass es not supported in CodeMirror ist, aber Sie können achieve it mit jQuery UI:

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

Answer 2

Was haben Sie versucht?

Ich habe gerade heruntergeladen der Entwicklung Momentaufnahme der Codemirror von http://codemirror.net/

aus dem Demo-Verzeichnis Lauf complete.html einen schönen resizeable Textbereich hat (in meinem Chrome-Browser). Tatsächlich haben zumindest einige andere Demos auch veränderbare Textareas.

Wenn dies Ihre Frage nicht beantwortet, aktualisieren Sie es bitte mit spezifischeren Informationen darüber, was Sie versucht haben und was nicht funktioniert.

Answer 3

Ich habe this little example.

Beachten Sie, dass dies nur vertikal ändert, was Sie wirklich wollen? Die horizontale Größenanpassung eines normalen Textbereiches neigt dazu, Layouts zu brechen - es ist normalerweise viel einfacher, ein Layout zu erstellen, bei dem der Editor eine feste Breite hat und der Inhalt darunter nach unten gedrückt wird, wenn Sie die Größe ändern.

Ich habe nicht das Design gesehen, in dem Sie dafür passen wollen, also rate ich.

Es sollte nicht zu schwer sein, dies zu ändern und ein funktionierendes Größenänderungs-Widget zu bekommen, das in beide Richtungen funktioniert, wenn es das ist, was Sie wollten.

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

Wenn jemand interessiert sich für kürzere und jQuery-Version @ mindplay.dk Antwort (btw. Dank dafür).