Incorporate CKEditor 5 into Django 3 Ways

▶

I'm going to explain how you can add CKEditor to your Django project in a very simple way. Here you can see that I'm using it for the Django admin. So, in addition to having all the rich content—just as you can see here—you can add this. Obviously, you can customize it, but that's what I left. Here you can add the title and so on. As you can see, it's a matter of style, but the HTML is what you edit.

We also have the image upload part, which works perfectly. We save it, right-click, open image... and there you can see it.

Installation methods

This is very simple. We actually have three options:

• The manual method, which doesn't need to be explained here.
• And two others using plugins (or packages, whatever you want to call them).

One of these packages is called django-ckeditor, which I don't recommend because it's for version 4, just like you're seeing here:

$ pip install django-ckeditor

The other one has exactly the same name, but with a 5 at the end, which is for version 5 (the most current one) and is the one I recommend:

$ pip install django-ckeditor-5

Configuring django-ckeditor-5

In this section, we'll walk through the steps for configuring CKEditor 5 in Django.

Let's define the Django settings:

settings.py

STATIC_URL = '/static/'
MEDIA_URL = '/media/'

This means that ALL uploaded files will now be located in /media/images/ within the project, including the FileField fields in the models.

Additionally, we set the MEDIA_ROOT to indicate the physical storage where the files will be saved:

settings.py

MEDIA_ROOT = os.path.join(BASE_DIR, 'media') # EJ 	/home/andres/proyect/media/

Finally, we add:

<Proyect>\urls.py

urlpatterns = [
    ***
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

To be able to serve files in MEDIA_ROOT when accessing a URL beginning with MEDIA_URL.

We configure both the package and the options we want in the toolbar in the settings file:

settings.py

INSTALLED_APPS = [
    ***
    'django_ckeditor_5',
]


CKEDITOR_5_CONFIGS = {
    'default': {
        'toolbar': {
            'items': ['heading', '|', 'bold', 'italic', 'link',
                        'bulletedList', 'numberedList', 'blockQuote', 'imageUpload', ],
                    }

    }
}

We can have multiple configurations, although in this example we only created one, which is the default. Within it, we must configure the available options.

Finally, to use it, the field is defined from the templates:

from django_ckeditor_5.fields import CKEditor5Field
***
class Post(models.Model):
   ***
   content = CKEditor5Field('Content', config_name='default', blank=True, null=True)

With this, we'll be able to access all the images uploaded through the FileField fields and those uploaded in CKEditor.

And with this simple method, you can now have a fully functional editor, both in terms of HTML and also for uploading images in Django. It couldn't be simpler.