Django使用django-ckeditor时多回复表单仅首个显示富编辑器问题

你的猜测完全正确，问题核心就是同页面多个回复表单的富文本输入框ID重复，django-ckeditor默认的初始化逻辑只会识别第一个匹配ID的输入框，后续输入框不会触发渲染。以下是完整解决方案：

步骤1：修正表单配置，添加动态唯一ID生成逻辑 #

你之前的表单配置存在两处错误：一是RichTextUploadingField对应的表单组件应该使用ckeditor自带的CKEditorUploadingWidget，而非默认的TextInput；二是需要添加构造方法为每个表单实例生成唯一ID，避免ID重复：

from ckeditor_uploader.widgets import CKEditorUploadingWidget

class MessageForm(forms.ModelForm):
    class Meta:
        model = UserMessages
        fields = ("postMessages",)
        widgets = {
            "postMessages": CKEditorUploadingWidget(attrs={"class": "form-control ckeditor-textarea"}),
        }
    
    def __init__(self, *args, reply_id=None, **kwargs):
        super().__init__(*args, **kwargs)
        # 传入当前回复对应的父评论ID，生成全局唯一的输入框ID
        if reply_id:
            self.fields['postMessages'].widget.attrs['id'] = f'postMessages_{reply_id}'

你之前定义的ReplyFormMessage不需要使用，回复的父评论关联可以在视图处理提交逻辑时，从你已经写的replies_id隐藏字段取值赋值给replies字段即可。

步骤2：修改视图逻辑，为每个回复表单传入唯一标识 #

在视图中实例化每个评论对应的回复表单时，传入当前评论的ID作为唯一标识：

# 示例视图逻辑，根据你的实际业务调整
def post_detail(request, post_id):
    post = UserPosts.objects.get(id=post_id)
    # 查询所有一级评论
    messages = UserMessages.objects.filter(post=post, replies__isnull=True)
    # 为每个评论生成对应的回复表单，传入评论ID作为唯一标识
    reply_forms = {
        msg.id: MessageForm(reply_id=msg.id) 
        for msg in messages
    }
    return render(request, 'post_detail.html', {
        'post': post,
        'messages': messages,
        'reply_forms': reply_forms,
    })

步骤3：调整模板加载逻辑，避免重复加载资源 + 手动初始化所有富编辑器 #

首先把form.media提到页面全局加载，不要放在循环的表单内部，避免重复加载ckeditor的JS资源导致冲突，最后添加JS代码手动初始化所有富文本输入框：

<!-- 页面顶部<head>标签内，全局加载一次ckeditor资源即可 -->
{{ MessageForm.media }}

<!-- 循环渲染每个评论和对应的回复表单 -->
{% for message in messages %}
    <!-- 这里是你的评论内容渲染代码 -->
    <div class="reply-form">
        <form method="POST">
            {% csrf_token %}
            {{ reply_forms.message.id }}
            <input type="hidden" name="replies_id" value="{{ message.id }}">
            <input type="submit" value="回复" class="btn btn-default">
        </form>
    </div>
{% endfor %}

<!-- 页面底部添加JS，手动初始化所有富文本输入框 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 遍历所有带自定义类的富文本输入框，逐个初始化
    document.querySelectorAll('.ckeditor-textarea').forEach(function(textarea) {
        // CKEditor4初始化方法，如果你使用的是CKEditor5，替换为对应初始化逻辑即可
        CKEDITOR.replace(textarea.id);
    });
});
</script>

注意事项 #

• 若出现CKEDITOR is not defined报错，检查页面是否正常加载了ckeditor的JS资源，确认form.media已在页面顶部加载完成
• 提交表单时不需要额外处理，富编辑器会自动将内容同步到对应的textarea输入框，不影响原有提交逻辑

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