CKEditor5：Django 中的图像上传问题 (django-ckeditor-5)

Question

我在将 CKEditor5 集成到 Django 项目时遇到问题。具体来说，图像上传功能无法正常工作。当我尝试上传图像时，我收到一条警告消息，指出“无法上传文件”。此外，我的终端显示错误“未找到：/ckeditor5/image_upload/ [18/Dec/2023 15:00:22]“POST /ckeditor5/image_upload/ HTTP/1.1”404 4276。”这很奇怪，因为图像上传功能只有在 Django 管理页面之外才会失败，而在该页面中它可以正常工作。您能建议如何解决这个问题吗？

#meetingapp/models.py
class Meeting(models.Model):

    meeting_minuit_last = CKEditor5Field(config_name='extends', null=True, blank=True)

meetingapp/templates/detail.html

{% extends 'base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% load humanize %}
{% block content %}

<link rel="stylesheet" href="{% static 'css/content-styles.css' %}" type="text/css">
<link rel="stylesheet" type="text/css" href="{% static 'css/meetingapp/detail.css' %}">

<div class="meeting_minuit_main mt-5 mb-5 container">
    <h2>Meeting Minutes</h2>
    <div class="ck-content meeting-minuit mt-5 mb-5 px-5">
        {% if target_meeting.meeting_minuit_last %}
            <p>{{ target_meeting.meeting_minuit_last | safe }}</p>
        {% endif %}
    </div>
    <div>
        <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            {% if not target_meeting.meeting_minuit_last %}
                {{ form.media }}
                {{ form.as_p }}
                <input class="btn btn-outline-secondary" type="submit" value="Submit">
            {% endif %}
            {% if target_meeting.meeting_minuit_last %}
                <a href="{% url 'meetingapp:minuit_update' pk=target_meeting.pk %}" class="btn btn-outline-primary">Update Minuit</a>
            {% endif %}
        </form>
    </div>
</div>

# CKeditor 5
# settings.py
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_FILE_STORAGE = "meetingapp.storage.CustomStorage"

CKEDITOR_5_CONFIGS = {
    "default": {
        "toolbar": [
            "heading",
            "|",
            "bold",
            "italic",
            "link",
            "bulletedList",
            "numberedList",
            "blockQuote",
            "imageUpload"
        ],
    },
    "comment": {
        "language": {"ui": "en", "content": "en"},
        "toolbar": [
            "heading",
            "|",
            "bold",
            "italic",
            "link",
            "bulletedList",
            "numberedList",
            "blockQuote",
        ],
    },
    "extends": {
        "language": "en",
        "blockToolbar": [
            "paragraph",
            "heading1",
            "heading2",
            "heading3",
            "|",
            "bulletedList",
            "numberedList",
            "|",
            "blockQuote",
        ],
        "toolbar": [
            "heading",
            "codeBlock",
            "|",
            "outdent",
            "indent",
            "|",
            "bold",
            "italic",
            "link",
            "underline",
            "strikethrough",
            "code",
            "subscript",
            "superscript",
            "highlight",
            "|",
            "bulletedList",
            "numberedList",
            "todoList",
            "|",
            "blockQuote",
            "insertImage",
            "|",
            "fontSize",
            "fontFamily",
            "fontColor",
            "fontBackgroundColor",
            "removeFormat",
            "insertTable",
            "sourceEditing",
        ],
        "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,
            },
        },
        "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",
                },
            ]
        },
        "list": {
            "properties": {
                "styles": True,
                "startIndex": True,
                "reversed": True,
            }
        },
        "htmlSupport": {
            "allow": [
                {"name": "/.*/", "attributes": True, "classes": True, "styles": True}
            ]
        },
    },
}


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

#forms.py
class MeetingCreateDocs(ModelForm):

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["meeting_minuit_last"].required = False

    class Meta:
        model = Meeting
        fields = ['meeting_minuit_last']
        labels = {
            'meeting_minuit_last': '',
        }
        widgets = {
            "meeting_minuit_last": CKEditor5Widget(
                attrs={"class": "django_ckeditor_5"}, config_name="extends"
            )
        }

Answer 1

这个问题你解决了吗？我也遇到过同样的情况。仅当用户具有“东西”真实状态时才能上传图像。经过身份验证的普通用户无法上传图像。