CodeMirror . Vertikale Bildlaufleiste deaktivieren

Question

Ich verwende derzeit CodeMirror, um CODE im Textbereich im Browser zu bearbeiten. Wenn ich mehr als 20 Codezeilen habe, wird eine vertikale Bildlaufleiste nach rechts hinzugefügt. Aber ich brauche diese Bildlaufleiste nicht. Stattdessen möchte ich, dass die Größe des Editors vertikal wächst.

Kann jemand helfen?

Answer 1

In CodeMirror 3 gibt es eine Option zur Deaktivierung der Bildlaufleisten: scrollbarStyle: "null"

Aus der Dokumentation:

scrollbarStyle: Zeichenkette

Wählt die Implementierung einer Bildlaufleiste. Die Standardeinstellung ist "native", die native Bildlaufleisten anzeigt. Die Kernbibliothek bietet auch den Stil "null", der die Bildlaufleisten vollständig ausblendet. Addons können zusätzliche Scrollbar-Modelle implementieren.

Die Kombination mit :

• automatische Höhe: height: auto & viewportMargin: Infinity (Beispiel: http://codemirror.net/demo/resize.html )
• Umschlingungslinien: lineWrapping: true

Und dann die Kontrolle der Höhe/Breite des übergeordneten div funktioniert gut

Answer 2

En CodeMirror-Doku spricht über einen Stil CodeMirror-Bildlauf die steuert, ob eine Bildlaufleiste erscheint und ob der Textbereich an den Inhalt angepasst wird. Genauer gesagt heißt es:

CodeMirror-Bildlauf Ob der Editor scrollt (Überlauf: auto + feste Höhe). Standardmäßig tut er das. Wenn Sie die Klasse CodeMirror auf height: auto einstellen und dieser Klasse overflow-x: auto; overflow-y: hidden; geben, passt sich der Editor an den Inhalt an.

Die Idee ist also, zu Ihrem eigenen CSS etwas hinzuzufügen wie:

.CodeMirror {
  border: 1px solid #eee;
  height: auto;
}
.CodeMirror-scroll {
  overflow-y: hidden;
  overflow-x: auto;
}

wie abgebildet aquí in der offiziellen Demo, die der Dokumentation über den Stil beigefügt ist CodeMirror-Bildlauf .

Das hat bei mir funktioniert:

Für meine persönliche Situation mit CodeMirror 2.34 habe ich nur den folgenden Stil zu meinem eigenen Stylesheet hinzugefügt:

div.CodeMirror-scroll { height: auto!important; overflow: visible; }

CodeMirror 3:

In meinem kurzen anfänglichen Test von CodeMirror 3 haben beide oben genannten Techniken nicht funktioniert und ich habe immer noch die Bildlaufleisten. Interessant, denn man sollte meinen, dass die offizielle Doku zu diesem Thema gültig ist - es sei denn, CodeMirror 3 hat seine Stile ein wenig geändert und die Doku hat noch nicht aufgeholt...

Answer 3

Für mich wickeln codemirror textarea auf ein Element mit display:flex das Problem des unerwünschten horizontalen Scrollens behoben:

<div style='display: flex'>
  <textarea></textarea>
</div>
<script>
//codemirror setup
</script>