如何让Django CKEditor编辑器尺寸跟随窗口大小自适应调整

修复步骤 #

1. 修正forms.py的部件配置 #

你当前给Body字段指定了原生Textarea部件，替换为CKEditor官方提供的部件即可保留编辑器原生能力：

# 头部先导入CKEditorWidget
from ckeditor.widgets import CKEditorWidget

# 部件配置部分修改为如下内容
widgets = {
    'created_date': forms.DateTimeInput(attrs={
        'class':'form-control',
        'readonly':'True',
        }) ,
    'Title' : forms.TextInput(attrs={
        'class':'form-control'
        }),
    # 替换为CKEditorWidget，不需要手动加ckeditor相关类名
    'Body': CKEditorWidget(attrs={
        'class':'form-control',
        'spellcheck':'False'}),
}

2. 调整settings.py的CKEditor配置 #

增加宽度自适应配置，开启弹性缩放能力：

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': [
            ['Undo', 'Redo',
             '-', 'Bold', 'Italic', 'Underline',
             '-', 'Link', 'Unlink', 'Anchor',
             '-', 'Format',
             '-', 'Maximize',
            ],
        ],
        'toolbarCanCollapse': True,
        # 新增以下自适应配置
        'width': '100%', # 宽度默认占满父容器
        'resize_enabled': True, # 允许用户拖拽缩放编辑器
        'resize_dir': 'vertical', # 仅允许垂直拖拽缩放，避免横向破坏自适应布局
        # 如需高度自动适配输入内容可加以下两行配置
        'extraPlugins': 'autogrow',
        'autoGrow_minHeight': 200,
    },
}

3. 增加CSS兜底样式 #

在template.html中加入样式，强制编辑器容器宽度自适应，避免框架默认固定宽度样式覆盖配置：

{{ form.media }}
<style>
/* 兼容CKEditor4 */
.cke {
    width: 100% !important;
}
/* 兼容CKEditor5 */
.ck.ck-editor {
    width: 100% !important;
}
.ck-editor__editable {
    width: 100% !important;
}
</style>
{{form.as_p}}

内容的提问来源于stack exchange，提问作者Chamodh Nethsara