Django集成django-ckeditor如何添加自定义CSS并实现响应式适配

首先先修正你现有代码的两个基础错误，这两个问题会直接导致后续配置不生效：

• Meta类里的fields参数写法错误，单元素元组必须加尾随逗号，你写的fields = ('product_desc')实际会被识别为字符串类型，触发字段加载异常。
• 你同时在字段层定义了RichTextField()，又在widgets里给同字段指定forms.Textarea，两者渲染逻辑完全冲突，你给Textarea配置的class、style不会生效，还会打乱CKEditor的资源加载顺序。

问题1：自定义CSS不生效、原有样式被破坏、jQuery失效的解决方法 #

按以下步骤调整配置即可：

1. 修正forms.py代码，删掉冲突的Textarea配置：

from django import forms
from .models import Products
from ckeditor.fields import RichTextField

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

    class Meta:
        model = Products
        # 补全单元素元组的逗号
        fields = ('product_desc',)
        labels = {
            'product_desc':'Description',
        }
        # 删除product_desc对应的Textarea widget配置，避免冲突

2. 打开项目的settings.py，添加/修改CKEditor全局配置，解决jQuery冲突和样式污染问题：

CKEDITOR_CONFIGS = {
    'default': {
        # 禁止CKEditor自动加载自带的jQuery，避免和你模板里引入的jQuery版本冲突
        'jquery': False,
        # 配置编辑器内生效的CSS，这里填你自己站点的全局样式路径，就能让编辑器内的内容样式和前端展示完全一致，实现自定义编辑器样式的需求
        'contentsCss': [
            '/static/css/your-site-main.css',
        ],
        # 关闭会注入全局样式的解析插件，避免破坏你原有模板的设计
        'removePlugins': 'stylesheetparser',
        'allowedContent': True,
        # 保留你原有的工具栏、高度等配置即可
        'toolbar': 'full',
        'height': 300,
        'width': '100%',
    }
}

3. 调整模板里的资源加载顺序：必须把你自己项目的jQuery、全局CSS放在{{ form.media }}之前加载，让CKEditor直接复用页面已有的jQuery实例，不要重复引入。
   调整后的模板参考：

<!-- 放在页面head区域，比form.media加载更早 -->
<link rel="stylesheet" href="/static/css/your-site-main.css">
<script src="/static/js/jquery.min.js"></script>

<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" style="font-size:13px;">Add</button>
    </div>
</form>

注意：不要在{{ form.media }}渲染之后再重复引入jQuery，否则依然会出现$对象冲突、自定义jQuery方法不生效的问题。

问题2：富文本字段响应式适配（移动端兼容）实现 #

按以下步骤配置即可保证移动端正常使用：

1. 前面settings里已经配置了'width': '100%'，可以让编辑器外层容器自动适配父元素宽度，不要给编辑器写死固定像素宽度。
2. 在你项目的全局CSS文件里添加以下样式，解决编辑器工具栏溢出、编辑区超出屏幕的问题：

/* 编辑器外层容器适配 */
.cke {
    max-width: 100% !important;
    box-sizing: border-box;
}
/* 工具栏适配：移动端自动换行，支持横向滚动 */
.cke_top {
    white-space: normal !important;
    overflow-x: auto !important;
}
.cke_toolbar {
    float: none !important;
    display: inline-block !important;
    vertical-align: top;
}
/* 编辑区宽度适配 */
.cke_contents, .cke_wysiwyg_frame {
    width: 100% !important;
}
/* 小屏幕下缩小工具栏按钮尺寸，减少空间占用 */
@media (max-width: 768px) {
    .cke_button {
        padding: 2px 3px !important;
    }
    .cke_button_icon {
        transform: scale(0.8);
    }
}

3. 给富文本详情展示区域添加响应式样式，避免用户上传的图片、表格超出移动端屏幕，对应你详情页模板里的.item_desc_container类：

/* 详情页富文本内容响应式 */
.item_desc_container img {
    max-width: 100% !important;
    height: auto !important;
}
.item_desc_container table {
    max-width: 100% !important;
    display: block;
    overflow-x: auto;
}
.item_desc_container pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}

可选优化：如果觉得移动端全量工具栏按钮太拥挤，可以在CKEDITOR_CONFIGS里单独配置精简版工具栏，只保留加粗、斜体、列表、图片上传等高频按钮，降低移动端操作成本。

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