CKEditor - 将编辑器大小限制为小于窗口高度

Question

将 CKEditor 5 与 React 结合使用。我正在寻找更好的解决方案来限制编辑器的高度。默认情况下，它似乎设置了高度以适合编辑器中的内容。在我的应用程序中，上下文通常非常大。这使得编辑器越过屏幕底部，然后页面必须向下滚动才能看到更多内容。滚动的结果是您将不再看到编辑器工具栏。到目前为止，我已经通过在 CSS 中使用 max-height 来缓解这个问题。 就像下面这样：

.ck-editor__editable {
min-height: 20vw;
max-height: 37vw;
resize: both;
}

如果窗口最大化到全屏，这可以正常工作。然而，如果例如在 4K 显示器上使用，那么编辑器就非常小。 另外，我最近添加了一个全屏插件，并且 max-height 属性限制了启用全屏模式时的高度。这使得全屏模式毫无意义。

因此，我希望有一个更好的解决方案来调整编辑器的大小，以便我们可以控制它填充窗口的大部分高度，而不会导致页面滚动并允许全屏模式正常工作。

有什么想法/想法吗？

Answer 1

我在另一个相关问题中发现了这一点。正是 scss 使编辑器始终是其父级高度的 100%，但不限制内容（并且滚动是从编辑器内部进行的）。

.ck-editor {

  height: 100% !important;
  display: flex;
  flex-direction: column;

  .ck-editor__top {
    flex-shrink: 1;
  }

  .ck-editor__main {
    flex-grow: 1;
    position: relative;

    .ck-editor__editable, .ck-source-editing-area {
      position: absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
    }

  }

}