Django集成CKEditor5表单报错：无效表单控件无法聚焦

以下是针对「The invalid form control with name=‘content’ is not focusable」报错的常见解决步骤：

核心原因 #

浏览器默认表单验证会检查必填字段，但CKEditor会将原始的<textarea>隐藏，导致浏览器找不到可聚焦的控件触发验证，进而抛出错误。

具体解决方法 #

1. 禁用浏览器默认验证 + 自定义验证 #

在表单标签中添加novalidate属性，绕过浏览器的默认验证逻辑，改用前端JS或后端验证确保字段不为空：

<!-- create.html 中的表单部分 -->
<form method="POST" novalidate>
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">提交</button>
</form>

2. 调整表单字段的必填属性 #

在forms.py中，给CKEditor控件手动设置required=False，避免浏览器自动给原始textarea添加必填标记：

# forms.py
from ckeditor.widgets import CKEditorWidget
from django import forms
from .models import YourModel

class ContentForm(forms.ModelForm):
    class Meta:
        model = YourModel
        fields = ['content']
        widgets = {
            'content': CKEditorWidget(attrs={'required': False})
        }

3. 确保CKEditor正确初始化 #

在模板中加载CKEditor所需的静态资源，保证编辑器能正常替换原始textarea：

<!-- create.html 中添加在表单前后均可 -->
{{ form.media }}

4. 后端补充字段验证 #

在视图中手动检查content字段内容，确保提交内容不为空：

# views.py
from django.shortcuts import render, redirect
from .forms import ContentForm

def create(request):
    if request.method == 'POST':
        form = ContentForm(request.POST)
        if form.is_valid():
            content = form.cleaned_data.get('content').strip()
            if not content:
                form.add_error('content', '内容不能为空')
                return render(request, 'create.html', {'form': form})
            form.save()
            return redirect('success_page')
    else:
        form = ContentForm()
    return render(request, 'create.html', {'form': form})

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