django-ckeditor-5本地文件上传失败及YouTube链接不显示问题求助

一、图片上传CSRF 403问题解决 #

1. 检查Django CSRF Cookie配置 #

cookiecutter-django默认可能开启了CSRF_COOKIE_HTTPONLY = True，这会导致前端JS无法读取csrftoken cookie，进而让django-ckeditor-5无法自动携带CSRF token。

修改settings.py：

CSRF_COOKIE_HTTPONLY = False

如果需要保持HTTPONLY=True，则手动给CKEditor上传请求添加CSRF头。

2. 手动配置CKEditor上传请求的CSRF Token #

方式一：模板中直接配置

在渲染编辑器的模板里，给CKEditor初始化代码添加上传头配置：

ClassicEditor
  .create(document.querySelector('#your-editor-element'), {
    upload: {
      headers: {
        'X-CSRFToken': '{{ csrf_token }}'
      }
    }
  })
  .catch(err => console.error(err));

方式二：自定义表单Widget配置

如果用Django表单的CKEditor5Widget，在forms.py中修改Widget配置：

from django import forms
from ckeditor5.widgets import CKEditor5Widget

class YourContentForm(forms.Form):
    content = forms.CharField(widget=CKEditor5Widget(config_name='default'))

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 传入CSRF Token到上传配置
        self.fields['content'].widget.config['upload'] = {
            'headers': {
                'X-CSRFToken': self.data.get('csrfmiddlewaretoken', '')
            }
        }

3. 验证CSRF信任源 #

Docker环境下，确保settings.py中CSRF_TRUSTED_ORIGINS包含你的服务域名，比如：

CSRF_TRUSTED_ORIGINS = ['https://your-domain.com', 'http://localhost:8000']

4. 升级django-ckeditor-5到最新版 #

部分旧版本存在CSRF自动处理的bug，执行升级：

pip install --upgrade django-ckeditor-5

二、YouTube视频无法显示问题解决 #

1. 确保CKEditor5启用MediaEmbed插件 #

在settings.py的CKEDITOR5_CONFIGS中，添加MediaEmbed到工具栏和插件列表，并配置YouTube支持：

CKEDITOR5_CONFIGS = {
    'default': {
        'toolbar': [
            'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 
            'numberedList', 'blockQuote', 'mediaEmbed'  # 确保包含mediaEmbed
        ],
        'plugins': ['MediaEmbed'],
        'mediaEmbed': {
            'previewsInData': True,
            'providers': [
                {
                    'name': 'youtube',
                    'url': '^https?://(?:www\.)?youtube\.com/watch\?v=([a-zA-Z0-9_-]+)',
                    'html': '''<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
                                    <iframe src="https://www.youtube.com/embed/$1" 
                                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" 
                                            allowfullscreen></iframe>
                                </div>'''
                }
            ]
        }
    }
}

2. 安全渲染编辑器内容 #

在结果页面模板中，使用|safe过滤器渲染内容，避免HTML转义：

{{ your_content_variable|safe }}

3. 调整Content Security Policy (CSP) #

cookiecutter-django默认有严格的CSP，需要允许加载YouTube的iframe。修改settings.py：

CSP_FRAME_SRC = ("'self'", "https://www.youtube.com")

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