Django CKEditor 5 frontend. Submit stops working when I add {{ form.media }} to template

Question

I'm following this guide to set up SKEditor5 for my django project. It works fine in Admin.

However, for it to work in my frontend form, I need to add {{ form.media }} and my Submit button simply stops doing anything. Note, without the {{ form.media }}, I do not see SKEditor on the frontend but Submit works just fine. There's very little information about Django CKEditor5 out there. Maybe CKEditor5 only work in Admin and not made for front end? Or maybe I should replace {{ form.media }} with something else? Please, help.

models.py

from django.db import models
from django import forms
from django_ckeditor_5.fields import CKEditor5Field
from PIL import Image
from django.contrib.auth.models import AbstractUser



class Article(models.Model):
    title = models.CharField(max_length=100)
    content = CKEditor5Field('Content', config_name='extends')

    def __str__(self):
        return self.title

views.py

from django.views.generic import ListView, CreateView
from .models import Article


class IndexView(ListView):
    model = Article
    template_name = 'test_app/index.html'
    context_object_name = 'articles'


class ArticleCreateView(CreateView):
    model = Article
    fields = '__all__'
    template_name = 'test_app/create.html'
    success_url = '/'

create.html

<form method="POST" action="">
    {% csrf_token %}
    <p>{{ form.media }}</p>
    <p>{{ form.as_p }}</p>

    <input type="submit" value="Add Article">
</form>

urls.py

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('test_app.urls')),
]

urlpatterns += [
    path("ckeditor5/", include('django_ckeditor_5.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

settings.py (relevant parts)

...

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'test_app.apps.TestAppConfig',
    'django_ckeditor_5',
]
...

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

...

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_CONFIGS = {
    'default': {
        'toolbar': ['heading', '|', 'bold', 'italic', 'link',
                    'bulletedList', 'numberedList', 'blockQuote', 'imageUpload', ],

    },
    'extends': {
        'blockToolbar': [
            'paragraph', 'heading1', 'heading2', 'heading3',
            '|',
            'bulletedList', 'numberedList',
            '|',
            'blockQuote', 'imageUpload'
        ],
        'toolbar': ['heading', '|', 'outdent', 'indent', '|', 'bold', 'italic', 'link', 'underline', 'strikethrough',
                    'code', 'subscript', 'superscript', 'highlight', '|', 'codeBlock',
                    'bulletedList', 'numberedList', 'todoList', '|', 'blockQuote', 'imageUpload', '|',
                    'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'mediaEmbed', 'removeFormat',
                    'insertTable', ],
        'image': {
            'toolbar': ['imageTextAlternative', 'imageTitle', '|', 'imageStyle:alignLeft', 'imageStyle:full',
                        'imageStyle:alignRight', 'imageStyle:alignCenter', 'imageStyle:side', '|'],
            'styles': [
                'full',
                'side',
                'alignLeft',
                'alignRight',
                'alignCenter',
            ]

        },
        'table': {
            'contentToolbar': ['tableColumn', 'tableRow', 'mergeTableCells',
                               'tableProperties', 'tableCellProperties'],
            'tableProperties': {
                'borderColors': customColorPalette,
                'backgroundColors': customColorPalette
            },
            'tableCellProperties': {
                'borderColors': customColorPalette,
                'backgroundColors': customColorPalette
            }
        },
        'heading': {
            'options': [
                {'model': 'paragraph', 'title': 'Paragraph', 'class': 'ck-heading_paragraph'},
                {'model': 'heading1', 'view': 'h1', 'title': 'Heading 1', 'class': 'ck-heading_heading1'},
                {'model': 'heading2', 'view': 'h2', 'title': 'Heading 2', 'class': 'ck-heading_heading2'},
                {'model': 'heading3', 'view': 'h3', 'title': 'Heading 3', 'class': 'ck-heading_heading3'}
            ]
        }
    }
}

Answer 1

Found the answer. You need to add blank=True in the field, like this:

content = CKEditor5Field('Content', config_name='extends', blank=True)