Django 19. Визуальный редактор CKEditor5

Что бы посты выглядели прилично, с форматированием и рюшечками, установим визуальный редактор. Ранее, я использовал CKEditor, но в этот раз, решил опробовать CKEditor5.

Установка CKEditor5.

Установим библиотеку pip install django-ckeditor-5. 
Далее необходимо сразу добавить установленную библиотеку django-ckeditor-50.2.8 в requirements.txt. Также добавить django_ckeditor_5 в INSTALLED_APPS.

Не уходя из файла settings.py, в самый конец добавим конфигурацию:

# CKEditor 5
customColorPalette = [
    {"color": "hsl(4, 90%, 58%)", "label": "Red"},
    {"color": "hsl(340, 82%, 52%)", "label": "Pink"},
    {"color": "hsl(291, 64%, 42%)", "label": "Purple"},
    {"color": "hsl(262, 52%, 47%)", "label": "Deep Purple"},
    {"color": "hsl(231, 48%, 48%)", "label": "Indigo"},
    {"color": "hsl(207, 90%, 54%)", "label": "Blue"},
]

CKEDITOR_5_CUSTOM_CSS = 'django_ckeditor_5/admin_dark_mode_fix.css'
CKEDITOR_5_FILE_STORAGE = "blog.storage.CustomStorage"

CKEDITOR_5_CONFIGS = {
    "default": {
        "language": "ru",
        'toolbar': {
            'items': [
                '|', 'heading',
                '|', 'outdent', 'indent',
                '|', 'bold', 'italic', 'link', 'underline', 'strikethrough', 'code', 'subscript', 'superscript',
                'highlight',
                '|', 'codeBlock', 'insertImage', 'bulletedList', 'numberedList', 'todoList',
                '|', 'blockQuote',
                '|', 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'mediaEmbed', 'removeFormat',
                'insertTable',
                '|',
            ],
            'shouldNotGroupWhenFull': True
        },
        "image": {
            "toolbar": [
                '|', "imageTextAlternative",
                "|", "imageStyle:alignLeft", "imageStyle:alignRight", "imageStyle:alignCenter", "imageStyle:side",
                "|", "toggleImageCaption",
                "|"
            ],
            "styles": [
                "full",
                "side",
                "alignLeft",
                "alignRight",
                "alignCenter",
            ],
        },
        "table": {
            "contentToolbar": [
                "tableColumn",
                "tableRow",
                "mergeTableCells",
                "tableProperties",
                "tableCellProperties",
            ],
            "tableProperties": {
                "borderColors": customColorPalette,
                "backgroundColors": customColorPalette,
            },
            "tableCellProperties": {
                "borderColors": customColorPalette,
                "backgroundColors": customColorPalette,
            },
        },
        "list": {
            "properties": {
                "styles": True,
                "startIndex": True,
                "reversed": True,
            }
        },
    },
}

Исправление для тёмной темы панели администратора Django.

Переменная CKEDITOR_5_CUSTOM_CSS задаёт пользовательские стили.

Если вы используете тёмную тему панели администратора, то в директории static необходимо создать директорию django_ckeditor_5 и в ней создать файл admin_dark_mode_fix.css со следующим содержимым:

.ck.ck-editor {  
color: black !important;  
}

Переопределение директории сохранения изображений.

По умолчанию, редактор сохраняет изображения в корне директории media, что безусловно не удобно.

Для того, что бы реализовать сохранение изображений в директориях post/%Y/%m/%d, служит параметр CKEDITOR_5_FILE_STORAGE. В нём определяется обработчик для сохранения файлов. Если у вас названия проекта совпадают, с моими, менять ничего не надо, если же не совпадают, то измените на соответствующие.

Создадим обработчик. Для этого перейдём в директорию приложения и создадим файл storage.py.

В файле пропишем следующий код:

import os
from datetime import datetime
from urllib.parse import urljoin

from django.conf import settings
from django.core.files.storage import FileSystemStorage


class CustomStorage(FileSystemStorage):
    """Пользовательское хранилище для изображений."""
    date = datetime.now().strftime('%Y/%m/%d')
    location = os.path.join(settings.MEDIA_ROOT, f"post/{date}/")
    base_url = urljoin(settings.MEDIA_URL, f"post/{date}/")

URL-паттерн для редактора.

Настройки почти окончены, осталось прописать URL-паттерн. Перейдём в urls.py в директории проекта и добавим в конец списка urlpatterns следующую строку:

path("ckeditor5/", include('django_ckeditor_5.urls'), name="ck_editor_5_upload_file"),

Дополнение.

Тем, кто читает данный пост, только, что бы узнать как установить редактор:
Для того, что бы форматированный в редакторе текст отображался на страницах сайта корректно, в шаблоне в теге вывода переменной с текстом, например, {{ post.body }} необходимо добавить фильтр safe. 
Должно быть вот так: {{ post.body | safe }}.

Обновление 22.07.2024.

В последней (на данный момент) версии библиотеки django-ckeditor-5==0.2.13 наблюдаются проблема с загрузкой изображений отличного от png формата. Решается достаточно просто - необходимо в файле settings.py добавить новый параметр с перечислением допустимых форматов:

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