Django CKEditor 5 前端。当我将 {{ form.media }} 添加到模板时提交停止工作

Question

我正在按照 this guide 为我的 django 项目设置 SKEditor5。它在管理员中运行良好。

但是，为了让它在我的前端表单中工作，我需要添加 {{ form.media }} 并且我的提交按钮会停止执行任何操作。请注意，如果没有 {{ form.media }}，我在前端看不到 SKEditor，但提交工作正常。关于 Django CKEditor5 的信息很少。也许 CKEditor5 只能在 Admin 中工作而不是为前端制作的？或者也许我应该用其他东西替换 {{ form.media }} ？请帮忙。

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（相关部分）

...

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

找到答案了。您需要在字段中添加 blank=True，如下所示：

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

Django CKEditor 5 前端。当我将 {{ form.media }} 添加到模板时提交停止工作

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

python

django

ckeditor

ckeditor5