Django-ckeditor and django-pipeline

Question

I have an issue with django-ckeditor, I'm using it with django-pipeline, everything it's ok when is run locally, but if DEBUG=False the ckeditor.js used is the compressed one and fails.

This is the issue I get from the developer tools in chrome when I load the admin to render a field that use django-ckeditor

ckeditor.8e9749424093.js:245 
   Uncaught TypeError: Cannot set property 'dir' of undefined
        at Object.d (ckeditor.8e9749424093.js:245)
        at f (ckeditor.8e9749424093.js:246)
        at Array.C (ckeditor.8e9749424093.js:246)
        at w (ckeditor.8e9749424093.js:246)
        at ckeditor.8e9749424093.js:247```

The file is present and loaded but something is wrong, seems that the compressing from pipeline breaks it.

I already google this issue, and the only advice I found is from the docs. I also added this code to the template, to be sure to tested all the possible solutions, but nothing changed.

{% extends "admin/base_site.html" %}
   {% block extrahead %}
   <script>window.CKEDITOR_BASEPATH = '/static/ckeditor/ckeditor/' </script>
   {{ block.super }}
   {% endblock %}

Any advice?

score 1 · Accepted Answer · answered Oct 05 '18 at 09:47

You were on the right track as explained here: https://github.com/django-ckeditor/django-ckeditor/blob/master/README.rst#id2

You need to place JS assets in the right order in your Django template.

The following solved it for me:

{% block extrahead %}
    {{ block.super }}

    {# CKEditor needs to know where its assets are located #}
    <script>window.CKEDITOR_BASEPATH = '/static/ckeditor/ckeditor/';</script>

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

Django-ckeditor and django-pipeline

1 Answers1