Django中CreateView的ModelForm使用CKEditor无法保存数据如何解决

核心原因 #

CKEditor是JavaScript渲染的富文本编辑器，HTMX提交表单时不会自动将编辑器内的内容同步到对应的<textarea>字段，导致后端无法获取到输入值；另外表单初始化方式也可能影响字段的绑定逻辑。

具体解决步骤 #

1. 提交前强制同步CKEditor内容到表单字段

在表单标签中添加HTMX的before-request事件，触发CKEditor的内容同步方法，确保提交时textarea已经填充了编辑器的实际内容：

<div>
    <form hx-post="{{ request.path }}" enctype="multipart/form-data" class="modal-content"
          hx-on::before-request="CKEDITOR.instances['id_description'].updateElement();">
        {% csrf_token %}
        <div class="modal-header">
            <h1>Create new event</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            {{form.media}}
            {{form.as_p}}
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <input type="submit" value="Submit">
        </div>
    </form>
</div>

注意：id_description是Django自动生成的表单字段ID，对应description字段；如果自定义了widget的attrs导致ID变化，需要替换成实际的字段ID。

2. 修正表单的Widget配置（二选一即可）

推荐直接在表单类中声明字段时绑定CKEditorWidget，避免在__init__中覆盖导致的绑定异常：

class EventForm(forms.ModelForm):
    description = forms.CharField(widget=CKEditorWidget())
    image = forms.ImageField(widget=forms.ClearableFileInput(), required=False)
    
    class Meta:
        model = Event
        fields = ['title', 'description', 'type', 'start_date', 'end_date', 'fee']  

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['start_date'].widget = forms.SelectDateWidget()
        self.fields['end_date'].widget = forms.SelectDateWidget()

如果一定要在__init__中设置Widget，需保留模型字段的required属性，避免前后端校验冲突：

class EventForm(forms.ModelForm):
    image = forms.ImageField(widget=forms.ClearableFileInput(), required=False)
    
    class Meta:
        model = Event
        fields = ['title', 'description', 'type', 'start_date', 'end_date', 'fee']  

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['start_date'].widget = forms.SelectDateWidget()
        self.fields['end_date'].widget = forms.SelectDateWidget()
        # 保留模型字段的必填属性
        self.fields['description'].widget = CKEditorWidget()
        self.fields['description'].required = self.fields['description'].required

3. 确认视图保存逻辑正确性

你的视图代码中form.save(commit=True)逻辑正常，无需额外修改，只需确认没有其他代码重置description字段：

class CreateEvent(LoginRequiredMixin, CreateView):
    model = Event
    form_class = EventForm
    template_name = 'events/events_form.html'
    success_url = reverse_lazy('events:index')

    def form_valid(self, form):
        form.instance.author = self.request.user
        event_obj = form.save(commit=True)
        image = self.request.FILES.get('image')
        if image:
            EventImage.objects.create(title=event_obj.title, image=image, event=event_obj)
        return HttpResponse(status=204, headers={'HX-Trigger' : 'eventsListChanged'})

验证方法 #

1. 打开浏览器开发者工具的Network标签，提交表单时查看Form Data里的description字段是否包含输入内容。
2. 如果仍为空，检查浏览器控制台是否有CKEditor初始化相关的JS报错。

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