django-ckeditor升级至CKEditor5后前端工具栏不显示，后台正常

问题描述 #

原django-ckeditor停止支持后升级至CKEditor5，后台管理面板工具栏正常显示，但前端页面无法显示工具栏。

后台显示效果 #

前端显示效果 #

现有代码 #

forms.py #

class CreateComment(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["text"].required = False

    class Meta:
        model = Comments
        fields = ['comment_content']
        widgets = {
            "text": CKEditor5Widget(
                attrs={"class": "django_ckeditor_5"}, config_name="extends"
            )
        }

前端HTML代码片段 #

{{ post|safe }}

解决步骤 #

1. 修正表单字段映射错误
   代码中Meta类声明的字段是comment_content，但widgets绑定的是text字段，二者不匹配。需修改widgets的键：

   widgets = {
       "comment_content": CKEditor5Widget(
           attrs={"class": "django_ckeditor_5"}, config_name="extends"
       )
   }
   

2. 确保前端加载CKEditor5静态资源
   后台会自动加载编辑器资源，但前端需手动引入。在渲染表单的模板中添加：

   {{ form.media }}
   

   该代码需放在表单字段渲染代码的上方或附近，用于加载CKEditor5所需的JS和CSS文件。

3. 正确渲染表单字段
   前端需渲染对应的编辑器字段，而非直接输出{{ post|safe }}。改为：

   {{ form.comment_content }}
   

   同时确保表单实例已传入模板上下文。

4. 检查CKEditor5配置有效性
   在settings.py中确认extends配置的工具栏是否正常定义：

   CKEDITOR_5_CONFIGS = {
       'extends': {
           'toolbar': [
               'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote'
               # 按需添加所需工具栏按钮
           ],
           # 其他配置项
       }
   }
   

   保证toolbar包含所需按钮，且配置名称与代码中的config_name一致。

5. 通过浏览器控制台排查错误
   打开浏览器开发者工具（F12），查看Console标签页的JS报错信息，定位资源加载失败、编辑器初始化失败等问题。

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