ExtJS 7中如何配置Froala编辑器适配父组件尺寸？

当然可以实现！你遇到的问题核心是Froala默认会随内容自动增高，再加上ExtJS布局的配合细节没处理好，下面是亲测有效的解决方案，适配ExtJS 7.2 Modern Toolkit：

关键配置步骤 #

1. 给父容器设置fit布局
   这是ExtJS里让子组件填满父容器的基础操作，确保你的Froala编辑器所在的父组件（比如Panel）配置layout: 'fit'，这样编辑器会自动继承父容器的宽高，不用硬写固定数值。

2. 关闭Froala自动高度并设置百分比尺寸
   在Froala的editorConfig里，禁用随内容自动增高的autoHeight，同时把宽高设为100%，让编辑器完全填充父容器空间：

editorConfig: {
    autoHeight: false, // 关闭内容驱动的自动增高
    height: '100%',
    width: '100%',
    // 其他编辑器配置（工具栏、语言等按需添加）
}

3. 配置内容区域的滚动规则
   要让内容过多时在编辑器内部出现滚动条，需要给Froala的编辑内容区域设置溢出规则。可以通过contentStyle直接配置，或者初始化后调整DOM样式：

editorConfig: {
    // 其他配置...
    contentStyle: 'overflow-y: auto; max-height: calc(100% - 60px);',
    // 这里的60px是工具栏的大致高度，你可以根据自己的工具栏按钮数量调整数值
}

完整组件示例 #

下面是封装好的自定义Froala编辑器组件，直接就能复用：

Ext.define('MyApp.view.FitFroalaEditor', {
    extend: 'Ext.froala.Editor',
    xtype: 'fitfroalaeditor',

    config: {
        layout: 'fit',
        editorConfig: {
            autoHeight: false,
            height: '100%',
            width: '100%',
            contentStyle: 'overflow-y: auto; max-height: calc(100% - 60px);',
            toolbarButtons: ['bold', 'italic', 'underline', 'paragraphFormat', 'undo', 'redo'],
            toolbarSticky: false // 避免工具栏固定导致内容被遮挡
        }
    },

    initialize: function() {
        this.callParent(arguments);
        
        // 监听渲染事件，确保样式正确应用
        this.on('render', function() {
            const editorInstance = this.getEditor();
            if (!editorInstance) return;
            
            // 确保编辑器容器填满父元素
            editorInstance.$el.css({
                height: '100%',
                overflow: 'hidden'
            });
            
            // 调整内容区域高度，适配工具栏
            const contentElement = editorInstance.$el.find('.fr-element');
            contentElement.css({
                maxHeight: 'calc(100% - 60px)',
                overflowY: 'auto'
            });
        }, this);

        // 监听父容器resize，同步调整编辑器尺寸
        this.on('resize', function() {
            const editorInstance = this.getEditor();
            if (editorInstance) {
                editorInstance.resize();
            }
        }, this);
    }
});

使用示例 #

把这个组件放到带fit布局的Panel里即可：

Ext.create('Ext.Panel', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,
    layout: 'fit',
    title: '自适应父容器的Froala编辑器',
    items: [{
        xtype: 'fitfroalaeditor',
        placeholder: '在这里输入内容...'
    }]
});

注意事项 #

• 工具栏高度的数值（示例中的60px）可能需要根据你实际使用的工具栏按钮数量微调，确保内容区域不会被工具栏遮挡。
• 如果父容器尺寸是动态变化的（比如窗口缩放），代码里的resize事件监听会自动同步编辑器尺寸，保持贴合父容器。

这样配置后，编辑器就会始终匹配父组件的尺寸，内容超出时内部自动出现滚动条，再也不会超出父容器边界了！

内容的提问来源于stack exchange，提问作者Sergey Novikov