Question

我有以下CSS用于设置CodeMirror的高度，它在不同的浏览器中运行良好：

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

现在，我转向froala，它似乎是唯一支持CodeMirror作为“视图代码”部分的WYSIWYG编辑器。

嵌入和设置CodeMirror以使用它没有问题，我应用的样式与嵌入式CodeMirror一起工作，但是我无法以我使用CodeMirrors的方式将高度应用于必需的CSS文件CSS文件。

froala有height，heightMax，heightMin和fullPage属性，可以在JavaScript初始化期间设置，但这不支持计算值。

在使用CSS的calc()方法之前，我使用JavaScript来调整CodeMirror的大小并使用混合结果，并且进行了大量额外的检查，这些检查更加“跳跃”并且通常要么超出范围（框超出范围）包含元素高度），或者只是缩短（在编辑元素和包含元素高度之间留下间隙）。

我想做的是通过CSS覆盖包含元素高度（我不介意编辑froala_editor.css文件（或直接属于项目的其他文件）来做到这一点。对于CodeMirror花了相当长的时间来找到高度calc css将进入.CodeMirror块的ONE点。对于froala，我不知道调用等价物的位置或内容来调整可编辑区域的大小。

我尝试将大小代码放在包括.fr-box.fr-basic .fr-element在内的多个地方，但无济于事。

Answer 1

froala的height参数接受有效的CSS值，例如100px，100或100%。因此，您可以使用浏览器检测来相当有效地决定要设置的值。

下面是一个关于如何做到这一点的示例，同时仍然在CSS中维护calc方法，而无需修改任何froala的CSS文件：

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

虽然以上是实现此目的的一种破解方式，但还有其他浏览器检测方法可以应用。这只是展示了如何在不触及任何来源的情况下尽可能优雅地完成这项工作。

总之，这可以如下工作：

检测浏览器（上面的案例使用JavaScript和UserAgent）
为检测到的浏览器支持calc CSS方法
将可访问变量传递给froala＆＃39; height init参数。

如何使用css

1 个答案: