2015-05-07 15 views
6

Sto tentando di consentire a codemirror di autorizzare automaticamente un numero determinato di linee o altezza pixel. Dopo aver raggiunto questa dimensione massima, il widget dovrebbe aggiungere barre di scorrimento.Codemirror autorizza fino a un determinato numero di righe

CodeMirror.fromTextArea(document.getElementById("code"), { 
    lineNumbers: true, 
    viewportMargin: 50 

});

max-height non funziona

.CodeMirror { 
border: 1px solid #eee; 
height: 100%; 
} 

http://jsfiddle.net/qzjo4ejh/

+0

duplicato? http://stackoverflow.com/questions/28378229/codemirror-how-to-limit-height-in-editor –

+0

nop, non è una dimensione fissa ma ridimensionabile con un massimo di quello che sto cercando – ic3

risposta

14

È necessario fornire lo stile .CodeMirror a height: auto e inserire max-height su .CodeMirror-scroll. L'editor incorporato su project page fa questo (vedi sorgente, è proprio vicino alla cima).

+0

Grazie mille, la donazione paypal sarebbe utile ;-) – ic3

+0

È facile: guarda i link per le donazioni su http://codemirror.net – Marijn

+0

Questo è il modo corretto di farlo. Si prega di considerare di aggiungerlo alla documentazione in un posto facile da trovare. – Danielo515

1

Che dire qualcosa di simile:

var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("code"), { 
    lineNumbers: true, 
    viewportMargin: 50 
}); 

var height; 
if(myCodeMirror.lineCount() > 5) { 
    height = 50; 
} else { 
    height = 20 * myCodeMirror.lineCount(); 
} 
myCodeMirror.setSize(500, height); 

Questo è un esempio. Puoi gestire un evento per ridimensionare dinamicamente il tuo CodeMirror quando le linee cambiano.

+0

puoi provare in violino, non funziona come previsto. – ic3

+0

Testato in fiddle, funziona perfettamente. Basta impostare altre righe di testo e 20 anziché 10px per riga –

+0

Controlla la risposta di Marijn (è il proprietario del progetto). Tuttavia grazie per il vostro impegno. – ic3

1

Questo è ciò che ha funzionato per me. Il CodeMirror-scroll stava provocando una dimensione troppo grande. Non devi fare nulla con viewportMargin nonostante ciò che dicono i documenti.

.CodeMirror { 
    border: 1px solid #eee; 
    height: auto; 
    max-height:100px; 
} 

.CodeMirror-scroll { 
    height: auto; 
    max-height:100px; 
} 

Fiddle

+0

l'altezza automatica su .CodeMirror-scroll ha appena salvato la mia giornata, senza che l'editor mostrasse sempre il 100% di altezza. Grazie! – ZPiDER

+0

ringrazia Charles Clayton – user1110977

Problemi correlati