如何为Django中CKEditor的RichTextField添加Bootstrap类/CSS实现响应式？

在Django项目中使用CKEditor的RichTextField时，大屏显示正常但小屏设备显示异常，可通过以下方法添加Bootstrap类或CSS实现响应式适配：

原代码问题说明 #

首先注意你的forms.py里存在一个错误：你为product_desc字段指定了forms.Textarea widget，这会覆盖RichTextField默认的CKEditor编辑器，导致CKEditor无法正常加载，先修正这个问题。

修正后的forms.py #

from ckeditor.fields import RichTextField

class update_product_info(forms.ModelForm):
    product_desc = RichTextField()

    class Meta:
        model = Products
        fields = ('product_desc',)  # 注意添加逗号，确保是元组类型
        labels = {
            'product_desc': '描述'
        }
        # 删除原有的widgets配置，保留RichTextField自带的CKEditorWidget

原settings.py代码 #

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar':'Custom',
        'FontSize':20,
        'toolbar_Custom': [
            ['Undo','Redo'],
            ['Styles','Font','FontSize','Bold','Underline','Italic','HorizontalRule','Flash'],
            ['TextColor','BGColor'],
            ['Table']
        ]
    }
}

原模板代码 #

<form action="" method="POST" class="needs-validation" style="font-size: 13px;" novalidate="" autocomplete="off" enctype="multipart/form-data">
 {% csrf_token %}
 {{form.media}}
 {{form.as_p}}
  
     <div class="d-flex align-items-center">
         <button type="submit" class="btn btn-outline-dark ms-auto" value="Update" style="font-size: 13px;">Add</button>
      </div>
 </form>

响应式适配解决方案 #

方法1：通过CKEditor配置实现响应式 #

修改settings.py中的CKEDITOR_CONFIGS，添加宽度自适应和自动高度的配置：

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar':'Custom',
        'FontSize':20,
        'toolbar_Custom': [
            ['Undo','Redo'],
            ['Styles','Font','FontSize','Bold','Underline','Italic','HorizontalRule','Flash'],
            ['TextColor','BGColor'],
            ['Table']
        ],
        # 响应式相关配置
        'width': '100%',  # 编辑器宽度占满父容器
        'resize_enabled': True,  # 允许手动调整编辑器大小（可选）
        'extraPlugins': 'autogrow',  # 启用自动高度插件，根据内容自动调整高度
        'autoGrow_minHeight': 200,  # 最小高度
        'autoGrow_maxHeight': 600,  # 最大高度
        'autoGrow_bottomSpace': 50,  # 底部预留空间
    }
}

方法2：结合Bootstrap类手动渲染字段 #

使用django-widget-tweaks给CKEditor容器添加Bootstrap的form-control类，步骤如下：

1. 安装依赖：

pip install django-widget-tweaks

2. 在settings.py的INSTALLED_APPS中添加：

INSTALLED_APPS = [
    # ... 其他应用
    'widget_tweaks',
]

3. 修改模板，手动渲染字段并添加Bootstrap类：

{% load widget_tweaks %}
<form action="" method="POST" class="needs-validation" style="font-size: 13px;" novalidate="" autocomplete="off" enctype="multipart/form-data">
 {% csrf_token %}
 {{form.media}}
 <div class="mb-3">
     <label for="{{ form.product_desc.id_for_label }}" class="form-label">{{ form.product_desc.label }}</label>
     {{ form.product_desc|add_class:"form-control" }}
 </div>
  
     <div class="d-flex align-items-center">
         <button type="submit" class="btn btn-outline-dark ms-auto" value="Update" style="font-size: 13px;">添加</button>
      </div>
 </form>

方法3：添加自定义CSS增强适配 #

如果上述方法仍有小屏显示问题，添加以下自定义CSS：

/* 可放在模板的<style>标签或静态CSS文件中 */
.cke_chrome {
    max-width: 100% !important;
    border-radius: 0.375rem !important; /* 匹配Bootstrap表单控件圆角 */
    box-sizing: border-box !important;
}
.cke_inner {
    width: 100% !important;
}
.cke_contents {
    max-width: 100% !important;
}
/* 小屏设备下调整工具栏换行显示 */
@media (max-width: 576px) {
    .cke_toolbar {
        flex-wrap: wrap !important;
    }
    .cke_toolgroup {
        margin-bottom: 5px !important;
    }
}

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