无法使用 Angular flex 布局设置 ngx-quill 编辑器的高度答案

【问题标题】：Unable to set the height for ngx-quill editor using angular flex layout无法使用 Angular flex 布局设置 ngx-quill 编辑器的高度
【发布时间】：2022-02-04 14:25:22
【问题描述】：

无法使用 angular flex 布局设置 ngx-quill 编辑器的高度。

编辑器的高度（灰色边框）溢出父 div（红色背景）。

stackblitz

如何确保编辑器留在父 div 中？

【问题讨论】：

[styles]="{minHeight: '250px'}" 最简单的方法。

标签： css flexbox quill angular-flex-layout ngx-quill

【解决方案1】：

解决方案： 由于某种原因，所有在线解决方案都不起作用。说了一些关于“不安全设置样式”的内容，它们甚至不适用。

此解决方案覆盖 Angular 中的 quill 文本区域（您可以选择任何 CSS 文件，我只是希望我所有的 Quill 编辑器都具有相同的大小）

src/styles.scss

.ql-container {
     height: 300px !important;
 }

【讨论】：

【解决方案2】：

使用最新的quill 和ngx-quill，并假设您可以使用::ng-deep，这样可以：

::ng-deep .ql-editor {
    height: 300px;
}

【讨论】：

或者用全局 scss 覆盖，因为 ng-deep 是 meh。本文可以提供帮助：betterprogramming.pub/…
是的，我同意。真是太棒了。不过老实说，我对全局 scss 也很了解，哈哈！

【解决方案3】：

解决方案是在 ql-container 类中覆盖 height -

.ql-container {
  height: auto;
}

github link

【讨论】：

【解决方案4】：

问题是来自ql-container 类的height: 100% 导致溢出。

只需将以下 css 添加到您的代码中，它将覆盖 quill 样式

.ql-container {
  min-height: 10rem;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ql-editor {
  height: 100%;
  flex: 1;
  overflow-y: auto;
  width: 100%;
}

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。