django-ckeditor-5

Beware that there are two different versions of Ckeditor to Django:

• django-ckeditor-5
• django-ckeditor(discontinued)

The one covered in this post is the django-ckeditor-5

Documentation:
https://pypi.org/project/django-ckeditor-5/ 

In this first part let's simply make it work throught the admin dashboard.

 

INSTALLED_APPS = [
    ...
    'django_ckeditor_5',
]

MEDIA_URL = '/media/'

CKEDITOR_5_UPLOAD_FILE_TYPES = ['jpeg', 'png', 'jpg'] 

CKEDITOR_5_CONFIGS = {
    "default": {
        "toolbar": [
            "heading", "|",
            "bold", "italic", "underline", "link", "bulletedList", "numberedList", "|",
            'blockQuote','|',
            'insertTable','|',
            "insertImage", "|",
            "sourceEditing"
        ],
        "image": {
            "toolbar": [
                "imageTextAlternative", "|",
                "imageStyle:alignLeft", 
                "imageStyle:alignRight", 
                "imageStyle:alignCenter", "|", 
            ],

        },
        'table': {
            'contentToolbar': [ 'tableColumn', 'tableRow', 'mergeTableCells',
            'tableProperties', 'tableCellProperties' ],
        },

    }
}

from django_ckeditor_5.fields import CKEditor5Field

class Article(models.Model):
    content = CKEditor5Field('Text')

from .models import Article
admin.site.register(Article)

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("polls.urls")),
    path("ckeditor5/", include('django_ckeditor_5.urls'), name="ck_editor_5_upload_file"),
]

urlpatterns += static(settings.STATIC_URL)
urlpatterns += static(settings.MEDIA_URL)

pip install django-ckeditor-5
python manage.py makemigrations
python manage.py migrate