如何使用 css 将 froala 设置为计算高度

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 作为 'view code' 部分的所见即所得编辑器。

我没有问题嵌入和设置 CodeMirror 来处理这个问题，我应用的样式适用于嵌入式 CodeMirror，但是我无法将高度应用到必需的 CSS 文件中我对 CodeMirrors CSS 文件的处理方式。

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

在使用 CSS 的 calc() 方法之前，我使用 JavaScript 来调整 CodeMirror 的大小，结果是混合的，并且进行了很多额外的检查 "jumpy" 并且通常要么越界（框超出包含元素的高度），要么落得很短（在编辑器元素和包含元素的高度之间留下间隙）。

我想做的是通过 CSS 覆盖包含元素的高度（我不介意编辑 froala_editor.css 文件（或直接属于项目的其他文件）来做这个。要为 CodeMirror 弄清楚这一点，花了相当长的时间才能找到一个点，高度计算 css 将进入 .CodeMirror 块。对于 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
});

虽然以上是实现此目的的一种 hackish 方法，但还可以应用其他浏览器检测方法。这只是演示了如何在不触及 froala 的任何源代码的情况下尽可能优雅地完成此操作。

总之，其工作原理如下：

检测浏览器（以上案例使用JavaScript和UserAgent）
为检测到的支持的浏览器设置一个可访问的变量calc CSS 方法
将可访问变量传递给 froala 的 height 初始化参数。

如何使用 css 将 froala 设置为计算高度

How to set froala to calc height using css

css

froala