ExtJS 7 Force Froala 编辑器以适应父组件大小答案

【问题标题】：ExtJS 7 Force Froala editor to fit parent component sizeExtJS 7 Force Froala 编辑器以适应父组件大小
【发布时间】：2020-05-30 14:38:22
【问题描述】：

是否可以配置 Froala 编辑器，使其在高度和宽度上始终与父组件的大小匹配？

目前，随着文本数量的增加，它超出了父组件的边界，无论我使用什么布局。

我检查了可用选项和示例列表，但没有找到合适的设置。我现在可以使用的唯一选项是为 Ext.froala.Mixin.editor 配置显式设置高度和宽度。

我正在使用 ExtJS 7.2，现代工具包。

我希望在 Froala 编辑器组件中滚动，但 Froala 编辑器组件超出了父组件的高度。

【问题讨论】：

请为您的问题创建一个小提琴。我试图根据文档中的示例重现您的问题，但没有成功。 fiddle.sencha.com/#fiddle/36b8&view/editor
@pvlt 只需为父组件设置固定高度并尝试将文本添加到溢出其高度的 froala 编辑器中 - 我希望在 froala 编辑器组件内滚动，但 froala 编辑器会超出父组件的高度。 fiddle.sencha.com/#fiddle/36be&view/editor

【解决方案1】：

为植物包装设置overflow: auto;：

    .fr-box.fr-basic.fr-top .fr-wrapper {
        overflow: auto;
    }

【讨论】：

【解决方案2】：

extjs v7.5.0、froala v4.0.8 的更新：

.x-froala .fr-wrapper {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

【讨论】：