添加{{ form.media }}后Django CKEditor 5前端表单提交失效如何解决

CKEditor 5 完全支持前端场景使用，你遇到的提交无响应问题和编辑器本身的适用场景无关，核心原因是编辑器内容未同步到原生表单元素，或配置的上传权限规则阻止了非管理员用户的操作，可按以下步骤修复：

第一步：添加表单提交同步逻辑 #

修改你的create.html文件，在原有代码基础上添加提交事件监听，手动将CKEditor 5的编辑内容同步到对应textarea元素，修改后完整代码如下：

<form method="POST" action="" id="articleForm">
    {% csrf_token %}
    {{ form.media }}
    {{ form.as_p }}
    <input type="submit" value="发布文章">
</form>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const articleForm = document.getElementById('articleForm');
    articleForm.addEventListener('submit', function (e) {
        // 同步所有CKEditor 5实例内容到原生表单元素
        for (const editor of Object.values(window.CKEDITOR_INSTANCES)) {
            editor.updateSourceElement();
        }
    });
});
</script>

第二步：调整上传权限配置（针对配置了图片/媒体上传的场景） #

你当前使用的extends配置包含了图片上传功能，django-ckeditor-5默认只允许管理员用户上传资源，普通用户访问时会触发权限报错导致表单提交被阻断，可在settings.py中添加以下配置放开权限：

# 自定义上传权限，此处示例为允许所有登录用户上传，可根据业务需求调整规则
CKEDITOR_5_FILE_UPLOAD_PERMISSION = lambda request: request.user.is_authenticated

如果不需要前端使用上传功能，也可以直接从CKEDITOR_5_CONFIGS的toolbar配置项中删除imageUpload、mediaEmbed等相关选项，避免触发权限校验。

可选替代加载方案 #

如果不想使用{{ form.media }}加载资源，也可以手动引入对应的静态文件，效果完全一致：

<!-- 放在页面头部 -->
{% load static %}
<script src="{% static 'django_ckeditor_5/bundle.js' %}"></script>
<link rel="stylesheet" href="{% static 'django_ckeditor_5/styles.css' %}">

排查注意事项 #

如果以上操作后仍有问题，可打开浏览器F12控制台查看JS报错：

• 如果是静态资源404，运行python manage.py collectstatic收集第三方包的静态资源即可
• 如果是上传接口403，检查第二步的权限配置是否正确

内容的提问来源于stack exchange，提问作者Igor