Django CKEditor弹窗背景为黑色看不清内容，如何修改背景色？

问题原因 #

该弹窗黑背景问题和Django框架、浏览器本身无关，90%以上的场景是项目全局CSS样式和CKEditor弹窗样式冲突导致：CKEditor的弹窗DOM默认会直接插入到页面根节点下，会继承全局对div、body等通用标签设置的背景样式，如果你项目全局配置了黑色背景，就会出现弹窗背景变黑的问题。少数情况是CKEditor皮肤配置错误导致的样式异常。

解决方法 #

• 方案1：排查冲突样式
  打开浏览器开发者工具（F12），选中弹窗的外层元素，查看样式面板中被覆盖的背景属性，定位到对应的全局CSS规则，调整选择器精度避免影响CKEditor相关元素。
• 方案2：强制覆盖CKEditor弹窗样式
  在项目全局CSS文件中添加专属规则，强制指定弹窗背景为浅色：

.cke_dialog,
.cke_dialog_body,
.cke_dialog_contents,
.cke_dialog_page_contents {
    background-color: #ffffff !important;
    color: #222222 !important;
}

如果是在Django admin后台使用，可以通过ModelAdmin的Media类注入修复样式：

from django.contrib import admin
from .models import 你的模型类

class 你的模型类Admin(admin.ModelAdmin):
    class Media:
        css = {
            "all": ("你的CSS文件存储路径/ckeditor_fix.css",)
        }
admin.site.register(你的模型类, 你的模型类Admin)

• 方案3：指定CKEditor浅色皮肤
  在Django CKEditor配置中增加皮肤配置，使用默认的浅色皮肤：

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': [["Format", "Bold", "Italic", "Underline", "Strike", "SpellChecker"],
                    ['NumberedList', 'BulletedList', "Indent", "Outdent", 'JustifyLeft', 'JustifyCenter',
                     'JustifyRight', 'JustifyBlock'],
                    ["Image", "Table", "Link", "Unlink", "Anchor", "SectionLink",
                        "Subscript", "Superscript", "Iframe"], ['Undo', 'Redo'],
                    ["Maximize"]],
        'skin': 'moono-lisa',
    },
}

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