CODEWITHSUNDEEP
htmldjangockeditordjango-ckeditor
Abhyudai
Abhyudai

Reputation: 924

Django-ckeditor's content not being styled in html as they look in the admin page

I'm using django-ckeditor 5.8.0 with python3.6, django 2.2.5 on ubuntu 18.04.3

settings.py

CKEDITOR_CONFIGS = {
    'default': {
        'skin': 'moono',
        'width': '100%',
        'toolbar_Basic': [
            ['Source', '-', 'Bold', 'Italic']
        ],
            {'name': 'paragraph',
             'items': ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-',
                       'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl',
                       'Language']},
            {'name': 'links', 'items': ['Link', 'Unlink', 'Anchor']},
            {'name': 'insert',
             'items': ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe']},
            '/',
            {'name': 'styles', 'items': [
                'Styles', 'Format', 'Font', 'FontSize']},
            '/',
            {'name': 'yourcustomtools', 'items': [
                'CodeSnippet',
            ]},
        ],
        'toolbar': 'YourCustomToolbarConfig',
        'tabSpaces': 4,
        'extraPlugins': ','.join([
            'uploadimage',
            'codesnippet',
        ]),
    }
}

models:

content = RichTextUploadingField()

CKEditor's static files are served in admin mode but the css file(contents.css) doesn't load in other views elsewhere.

I'm using ManifestStaticFilesStorage and after running collectstatic, files exist where it should.

I've also added the following lines in the template:

<script>window.CKEDITOR_BASEPATH = "{% static '/ckeditor/ckeditor/' %}";</script>
<script type="text/javascript" src="{% static 'ckeditor/ckeditor-init.js' %}" data-ckeditor-basepath="{% static 'ckeditor/ckeditor/' %}" id="ckeditor-init-script"></script>
<script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>

***

{{content|safe}}

Here's the image of the html from the browser :

image

Clicking on those two js files also shows its content, meaning they are accessible.

contents.css file isn't loaded, hence no styling.

Same story on the development server too.

Any suggestions to solve the issue would be great.

Upvotes: 2

Views: 1113

Answers (1)

maltoze
maltoze

Reputation: 737

try add this line to your content page.

<link href="/static/ckeditor/ckeditor/contents.css" rel="stylesheet">

Upvotes: 0

Related Questions