{"id":8091,"library":"django-ckeditor-5","title":"CKEditor 5 for Django","description":"django-ckeditor-5 is a Django application that seamlessly integrates the modern CKEditor 5 rich text editor into Django projects, offering an intuitive content creation experience. It provides features like text formatting, image uploads, tables, and code blocks, making it highly customizable. This package is specifically for CKEditor 5, distinct from the older `django-ckeditor` which uses CKEditor 4. The current version is 0.2.20, with a generally active release cadence.","status":"active","version":"0.2.20","language":"en","source_language":"en","source_url":"https://github.com/hvlads/django-ckeditor-5","tags":["django","ckeditor","richtext","editor","wysiwyg","content management"],"install":[{"cmd":"pip install django-ckeditor-5","lang":"bash","label":"Install stable release"}],"dependencies":[{"reason":"Core framework dependency for any Django application.","package":"django","optional":false},{"reason":"Required for image manipulation and uploads within the editor.","package":"Pillow","optional":false}],"imports":[{"note":"Must be added to Django's INSTALLED_APPS in settings.py.","symbol":"django_ckeditor_5","correct":"INSTALLED_APPS = ['django_ckeditor_5']"},{"note":"Used in Django models for rich text content.","symbol":"CKEditor5Field","correct":"from django_ckeditor_5.fields import CKEditor5Field"},{"note":"Used in Django forms to render the CKEditor 5 editor.","symbol":"CKEditor5Widget","correct":"from django_ckeditor_5.widgets import CKEditor5Widget"},{"note":"A dictionary in settings.py to configure editor toolbars, language, and other options.","symbol":"CKEDITOR_5_CONFIGS","correct":"CKEDITOR_5_CONFIGS = {'default': {...}}"}],"quickstart":{"code":"import os\nfrom django.db import models\nfrom django.forms import ModelForm\nfrom django.conf import settings\nfrom django_ckeditor_5.fields import CKEditor5Field\nfrom django_ckeditor_5.widgets import CKEditor5Widget\n\n# settings.py additions (example)\n# INSTALLED_APPS = [\n# ...,\n# 'django_ckeditor_5',\n# ]\n# MEDIA_URL = '/media/'\n# MEDIA_ROOT = os.path.join(BASE_DIR, 'media')\n# CKEDITOR_5_CONFIGS = {\n# 'default': {\n# 'toolbar': ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'imageUpload', 'fileUpload'],\n# 'language': 'en',\n# 'width': 'auto'\n# }\n# }\n\nclass Article(models.Model):\n title = models.CharField(max_length=200)\n content = CKEditor5Field(verbose_name='Rich Content', config_name='default')\n\n def __str__(self):\n return self.title\n\nclass ArticleForm(ModelForm):\n class Meta:\n model = Article\n fields = '__all__'\n widgets = {\n 'content': CKEditor5Widget(config_name='default')\n }\n\n# In a Django template, if using a form:\n# {% extends 'base.html' %}\n# {% block content %}\n# \n# {% endblock content %}","lang":"python","description":"To quickly integrate `django-ckeditor-5`, first add `django_ckeditor_5` to your `INSTALLED_APPS` and define `MEDIA_URL`, `MEDIA_ROOT`, and `CKEDITOR_5_CONFIGS` in your `settings.py`. Then, use `CKEditor5Field` in your Django models for rich text fields and `CKEditor5Widget` in your forms. Ensure `{{ form.media }}` is included in your templates for the editor to render correctly."},"warnings":[{"fix":"Ensure you are installing `django-ckeditor-5` and following its specific documentation. Do not confuse it with `django-ckeditor`.","message":"This library is for CKEditor 5, which is a complete rewrite from CKEditor 4. Code and configuration for the older `django-ckeditor` (which uses CKEditor 4) are not compatible and will not work.","severity":"breaking","affected_versions":"All versions"},{"fix":"Add `{{ form.media }}` inside the `` tag or within the `` before your form in the template where the CKEditor 5 field is used.","message":"When using `CKEditor5Widget` in forms, especially outside of the Django admin, you MUST include `{{ form.media }}` in your HTML template's `` or before the form. Without it, CKEditor 5's JavaScript and CSS assets will not load, and the editor will not render or function correctly.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Implement robust server-side validation for uploaded files (e.g., file type, size, content scanning). Consider restricting file types or limiting uploads to trusted users. Configure `CKEDITOR_5_MAX_FILE_SIZE` in settings.py to limit file sizes.","message":"Enabling file/image uploads without proper validation or restrictions can pose a security risk. The library warns that uploaded files are not validated by default, and allowing generic file uploads disables image-specific validation.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-16T00:00:00.000Z","next_check":"2026-07-15T00:00:00.000Z","problems":[{"fix":"Ensure `{{ form.media }}` is present in your HTML template, preferably within the `` or before the form, to load the necessary static files for the widget.","cause":"The CKEditor 5 JavaScript and CSS assets have not been loaded, most commonly due to missing `{{ form.media }}` in the template.","error":"CKEditor 5 textarea displays as plain text input, no rich text editor functionality."},{"fix":"Set `MEDIA_ROOT` to an absolute path for uploaded files and `MEDIA_URL` to the public URL. Ensure Django's media URL patterns are correctly configured in your project's `urls.py` for serving uploaded files.","cause":"Incorrectly configured `MEDIA_ROOT` and `MEDIA_URL` settings in `settings.py`, or the URL pattern for media handling is not included.","error":"Image/file uploads fail or images do not display after upload."},{"fix":"Uninstall `django-ckeditor` if present (`pip uninstall django-ckeditor`) and install `django-ckeditor-5` (`pip install django-ckeditor-5`). Update your `INSTALLED_APPS` and model/form imports to use `django_ckeditor_5`'s components.","cause":"You have accidentally installed or are using the old `django-ckeditor` package (for CKEditor 4) instead of `django-ckeditor-5`.","error":"WARNINGS: ?: (ckeditor.W001) django-ckeditor bundles CKEditor 4.x.x which isn't supported anymore..."}]}