Wie froala zu calc Höhe einzustellen mit CSS

Question

Ich habe die folgende CSS, die ich die Höhe von Codemirror einstellen zu benutzen, die auch in allen Browsern funktioniert:

.CodeMirror { 
    /* Firefox */ 
    height: -moz-calc(100vh - 190px); 
    /* WebKit */ 
    height: -webkit-calc(100vh - 190px); 
    /* Opera */ 
    height: -o-calc(100vh - 190px); 
    /* Standard */ 
    height: calc(100vh - 190px); 
} 

Nun, ich froala bewege was zu sein scheint der einzige WYSIWYG-Editor, der CodeMirror als 'Ansichtscode' unterstützt.

Ich habe kein Problem Embedding und Einrichten von CodeMirror, damit zu arbeiten, und der Stil, den ich angewendet habe arbeitet mit dem eingebetteten CodeMirror, aber ich kann nicht die Höhe auf die erforderliche CSS-Datei in der Art und Weise, die ich getan habe CodeMirrors CSS-Datei.

Es gibt height, heightMax, heightMin und fullPage Eigenschaften für froala, die während JavaScript Initialisierung eingestellt werden kann, was jedoch nicht berechneten Werte nicht unterstützt.

Vor der CSS-Methode calc() verwendete ich JavaScript, um CodeMirror mit gemischten Ergebnissen zu skalieren, und eine Menge zusätzlicher Checks, die viel "nerviger" waren und oft entweder außerhalb der Grenzen gingen Höhe) oder nur kurz (wobei eine Lücke zwischen dem Editorelement und der Höhe der enthaltenden Elemente verbleibt).

Was ich tun möchte, ist überschreiben die Höhe der enthaltenden Elemente über CSS (ich habe nichts dagegen, die froala_editor.css Datei (oder andere Dateien direkt Teil des Projekts), um dies zu tun. Um dies herauszufinden für CodeMirror nahm eine ziemlich lange Zeit, um den einen Punkt zu finden, wo die Höhe Calc CSS würde gehen in den .CodeMirror Block. Mit froala, ich weiß nicht, wo oder was das Äquivalent aufgerufen wird, um die bearbeitbare Fläche zu bestimmen.

Ich habe versucht, die Platzierung Größencode an mehreren Stellen einschließlich .fr-box.fr-basic .fr-element, ohne Erfolg

Answer 1

Der Parameter height von froala akzeptiert gültige CSS-Werte l ike 100px, 100 oder 100%. Daher können Sie mithilfe der Browsererkennung ziemlich effektiv entscheiden, welcher Wert festgelegt werden soll.

Es folgt ein Beispiel dafür, wie dies erreicht werden kann, während immer noch die calc Methode in CSS, ohne dass die Aufrechterhaltung jeden froala CSS-Dateien ändern:

// set the default calc value 
var codeHeight = 'calc(100vh - 96px)'; 

// prepend any browser engine specific names if needed 
if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1) { 
    codeHeight = '-o-' + codeHeight; 
} else if(navigator.userAgent.indexOf("Chrome") != -1) { 
    codeHeight = '-webkit-' + codeHeight; 
} else if(navigator.userAgent.indexOf("Safari") != -1) { 
    codeHeight = '-webkit-' + codeHeight; 
} else if(navigator.userAgent.indexOf("Firefox") != -1) { 
    codeHeight = '-moz-' + codeHeight; 
} 

// Initialize froala using calc for height 
$('.code').froalaEditor({ 
    height: codeHeight 
}); 

Während Obengenanntes eine hackish Art und Weise zu erreichen sind Dies gibt andere Browser-Erkennungsmethoden, die angewendet werden könnten. Dies zeigt nur, wie dies so elegant wie möglich durchgeführt werden kann, ohne die Quellen von froala zu berühren.

Zusammengefasst funktioniert dies wie folgt:

• den Browser Detect (oben Fall verwendet JavaScript und Useragent)
• Stellen Sie eine zugängliche Variable auf den erfassten Browser unterstützt calc CSS-Methode
• die zugänglich Pass Variable zu froalas height Init-Parameter.