How can I add customized CSS styles to django-ckeditor editor?

Question

I wanna be able to add customized CSS styles that I've already defined on my CSS files. I read the documentation here and here, but it just does not work.

**django-ckeditor version **

django-ckeditor       6.7.1

This is ckeditor configs

CKEDITOR_CONFIGS = {
    'default': {
        'allowedContent': True,
        'stylesSet':[
            {
            'name':'highlighted-text', 'element':'div', 'attributes':{'class':'highlighted-text'}
            },
        ],
        'toolbar': 'Custom',
        'toolbar_Custom': [            
            ['Bold', 'Italic', 'Underline'],
            ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
            ['Link', 'Unlink'],
            ['RemoveFormat', 'Source', 'Image', 'Table']
        ],
    }
}

**This is how django-ckeditor is looking like **

Any thoughts?

Answer 1

I would give a general answer. Which means, will cover all scenarios. Not specific for django-ckeditor.

Method : using custom css style file

Methodology -

1) Open desired webpage(page/area you want to customise) on chrome (any browser as you like)

2) Right click area you want to style / customise

3) Click on Open in debug mode(browser context menu)

4) Find the elements you want to customise

5) Copy class to a new text file

6) Add your styles like below

.coped_class_name{
color:green !important;
} 

Save this file with extension .css. And Move/copy this file to django static folder.

8)

Add this css file to your desired page. And Refresh the page. Restart the server if styles does not show up.