Config.js file in django-ckeditor not applying configurations

Question

I have been trying to style Django-CKEditor by modifying the config.js file, all to no avail; my custom configuration in config.js is not working. I have gone as far as manually modifying the default CSS files, but all these modifications fail to work as well. Although when I use Chrome's developers tool to make some modifications, they all worked. My question is, is the config.js file not usable in Django?

config.js

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.uiColor = '#000000';
    config.enterMode = CKEDITOR.ENTER_BR;
    config.width = "100%";
    config.height = "300";
    config.extraPlugins = 'autogrow';
    config.autoGrow_minHeight = 250;
    config.autoGrow_maxHeight = 600;
};

settings.py

CKEDITOR_UPLOAD_PATH = "images/avatar/"
CKEDITOR_IMAGE_BACKEND = 'pillow'

CKEDITOR_RESTRICT_BY_USER = True
CKEDITOR_CONFIGS = {
    'default': {
        'skin': 'moono-lisa',
        'toolbar_Basic': [
            ['Source', '-', 'Bold', 'Italic']
        ],
        'toolbar_Custom': [
            {'name': 'styles', 'items': ['Styles']},
            {'name': 'basicstyles',
             'items': ['Bold', 'Italic', 'Underline']},
            {'name': 'colors', 'items': ['TextColor']},
            {'name': 'links', 'items': ['Link', 'Unlink', 'Anchor']},
            {'name': 'insert', 'items': ['Smiley']},
        ],
        'toolbar': 'Custom',
    },
}

HTML

<script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>

Answer 1

For anyone who might come across the same issue, there is no need to modify the config.js file in your Django app except you have more advanced options to work with. In the simplest form, you can simply make the modifications within the CKEDITOR_CONFIGS settings in your settings.py file.

See a sample of my modifications below.

CKEDITOR_CONFIGS = {
'default': {
        'toolbar_Basic': [
            ['Source', '-', 'Bold', 'Italic']
        ],
        'width': 'auto',
        'toolbar_Custom': [
            {'name': 'basicstyles',
         ...more settings...
        ],
        'toolbar': 'Custom',

        # more custom settings
        'toolbarCanCollapse': True,
        'uiColor': '#f4f5f7',
    },
}