Django - CKEditor5Field字段默认字体颜色答案

【问题标题】：Django - CKEditor5Field field default font colorDjango - CKEditor5Field字段默认字体颜色
【发布时间】：2023-02-13 04:32:43
【问题描述】：

我的一个模型中有 2 个 CKEditor5Fields。我在管理面板中遇到了一个问题，即当浏览器处于深色模式时，字段的背景颜色保持白色，字体颜色变为灰白色，因此很难阅读。文本在呈现到页面时没有问题。有没有办法将默认字体颜色设置为黑色，以便浏览器模式无关紧要？

灯光模式：

黑暗模式：

模型属性：

property_short_description = CKEditor5Field('property short description', config_name='extends', blank = True, null = True)
description = CKEditor5Field('description', config_name='extends')

我的配置：

CKEDITOR_5_CONFIGS = {
    'default': {
        'toolbar': ['heading', '|', 'bold', 'italic', 'link',
                    'bulletedList', 'numberedList', 'blockQuote', 'imageUpload', ],
    },
    'extends': {
        'blockToolbar': [
            'paragraph', 'heading1', 'heading2', 'heading3',
            '|',
            'bulletedList', 'numberedList',
            '|',
            'blockQuote', 'imageUpload'
        ],
        'toolbar': ['heading', '|', 'outdent', 'indent', '|', 'bold', 'italic', 'link', 'underline', 'strikethrough',
        'code','subscript', 'superscript', 'highlight', '|', 'codeBlock',
                    'bulletedList', 'numberedList', 'todoList', '|',  'blockQuote', 'imageUpload', '|',
                    'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'mediaEmbed', 'removeFormat',
                    'insertTable',],

        'image': {
            'toolbar': ['imageTextAlternative', 'imageTitle', '|', 'imageStyle:alignLeft', 'imageStyle:full',
                        'imageStyle:alignRight', 'imageStyle:alignCenter', 'imageStyle:side',  '|'],
            'styles': [
                'full',
                'side',
                'alignLeft',
                'alignRight',
                'alignCenter',]
            },
        'table': {
            'contentToolbar': [ 'tableColumn', 'tableRow', 'mergeTableCells',
            'tableProperties', 'tableCellProperties' ],
            'tableProperties': {
                'borderColors': customColorPalette,
                'backgroundColors': customColorPalette
            },
            'tableCellProperties': {
                'borderColors': customColorPalette,
                'backgroundColors': customColorPalette
            }
        },
        'heading' : {
            'options': [
                { 'model': 'paragraph', 'title': 'Paragraph', 'class': 'ck-heading_paragraph' },
                { 'model': 'heading1', 'view': 'h1', 'title': 'Heading 1', 'class': 'ck-heading_heading1' },
                { 'model': 'heading2', 'view': 'h2', 'title': 'Heading 2', 'class': 'ck-heading_heading2' },
                { 'model': 'heading3', 'view': 'h3', 'title': 'Heading 3', 'class': 'ck-heading_heading3' }
            ]
        }
    }
}

【问题讨论】：

嗨@Mwheeler91。你解决了这个问题吗？如果是，你是怎么做到的？谢谢。
嗨@Zapsys，不，我没有解决这个问题。我给开发人员发了电子邮件，但没有得到回复。

标签： python django django-models ckeditor ckeditor5

【解决方案1】：

Django 深色模式样式应用于 CKEditor 文本颜色。一种可能的解决方案是使用自定义 CSS 文件。这是我的方法：

在settings.py 确保你有这些行：

# path to the custom CSS file
CKEDITOR_5_CUSTOM_CSS = 'css/ckeditor5/admin_dark_mode_fix.css'

# I don't know why but if I put the CSS file in the STATIC_ROOT folder, the styles are not applied.
# So I use a custom static folder
STATICFILES_DIRS = [
    BASE_DIR / 'staticfiles',
]

然后在项目的根目录中创建这个 CSS 文件：

staticfilescssckeditor5dmin_dark_mode_fix.css

并添加此修复：
.ck.ck-editor {
    color: black !important;
}

【讨论】：