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

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 **

enter image description here

Any thoughts?

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.

Back to Top