Cómo integrar CKEditor 5 en Django 6

▶

Si estás buscando una forma sencilla y funcional de añadir un editor de texto enriquecido en Django, CKEditor es, sin duda, una de las mejores opciones. En mi caso lo estoy usando directamente en el Django admin, con contenido HTML completo y carga de imágenes funcionando sin problemas, y la integración es mucho más simple de lo que parece.

En esta guía te explico cómo integrar CKEditor 5 en Django paso a paso, qué paquete elegir hoy en día y cómo dejarlo funcionando correctamente sin configuraciones raras ni hacks innecesarios.

También tenemos la parte de la carga de imágenes, que funciona perfectamente. Le damos a guardar, clic derecho, abrir imagen... y ahí lo puedes ver.

Qué es CKEditor y por qué usarlo con Django

CKEditor es un editor WYSIWYG (What You See Is What You Get) que permite crear contenido HTML enriquecido sin escribir código a mano. Es ideal para:

• Posts de blogs
• Páginas de contenido
• Campos largos en el admin
• CMSs hechos con Django

La ventaja principal es que el HTML que se genera es exactamente el que editas. Al final, es cuestión de estilo y configuración, pero el control lo tienes tú.

CKEditor 4 vs CKEditor 5: cuál usar hoy

Aquí es donde muchos tutoriales se quedan desactualizados.

Existen dos paquetes muy parecidos:

• django-ckeditor → CKEditor 4 (obsoleto)
• django-ckeditor-5 → CKEditor 5 (actual)

Aunque ambos “funcionan”, no recomiendo usar django-ckeditor a día de hoy. Está basado en CKEditor 4, que ya no es la versión moderna del editor.

Mi recomendación clara es usar django-ckeditor-5, que está basado en CKEditor 5 y encaja mejor con proyectos actuales.

Instalación:

pip install django-ckeditor-5

Formas de instalar CKEditor en Django

Para esto es muy sencillo. Realmente tenemos tres formas:

1. Instalación manual
   1. Posible, pero innecesaria hoy en día.
2. django-ckeditor (CKEditor 4)
   1. Funciona, pero está desactualizado.
3. django-ckeditor-5 (recomendado)
   1. Es la opción más limpia, moderna y sencilla.

Para el resto del artículo asumimos que usas django-ckeditor-5.

Instalación

Uno de estos paquetes es llamado django-ckeditor, que no te recomiendo porque es para la versión 4, tal cual estás viendo por acá:

$ pip install django-ckeditor

El otro tiene exactamente el mismo nombre, pero con un 5 al final, que es para la versión 5 (la más actual) y es la que te recomiendo:

$ pip install django-ckeditor-5

Configuración básica en Django (MEDIA y archivos) - django-ckeditor-5

En este apartado vamos a ver los pasos para configurar CKEditor 5 en Django.

Definimos las configuraciones de Django:

settings.py

STATIC_URL = '/static/'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Lo que indica que ahora TODOS los archivos cargados, se establecerán en /media/images/ dentro del proyecto, esto incluye los campos FileField de los modelos.

Adicionalmente, configuramos el MEDIA_ROOT que indica el almacenamiento físico en donde se guardan los archivos:

settings.py

MEDIA_ROOT = os.path.join(BASE_DIR, 'media') # EJ /home/andres/proyect/media/

Finalmente, agregamos:

<Proyect>\urls.py

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    ***
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Para poder servir los archivos que estén en MEDIA_ROOT cuando accedamos a una URL que comience con MEDIA_URL.

Lo configuramos en el archivo de settings, tanto el paquete como las opciones que queramos que tenga en el toolbar:

settings.py

INSTALLED_APPS = [
    ***
    'django_ckeditor_5',
]

Configurar el toolbar y opciones

CKEditor 5 permite múltiples configuraciones. En este ejemplo usamos una configuración por defecto sencilla pero funcional:

settings.py

CKEDITOR_5_CONFIGS = {
   'default': {
       'toolbar': {
           'items': [
               'heading', '|',
               'bold', 'italic', 'link',
               'bulletedList', 'numberedList',
               'blockQuote', 'imageUpload',
           ],
       },
   },
}

Aquí puedes personalizar todo lo que quieras. En mi caso dejé algo simple, pero suficiente para crear contenido real sin sobrecargar el editor.

Podemos tener multiples configuraciones, aunque, en este ejemplo creamos solamente uno que es el de default; en la misma, debemos de configurar las opciones que tendrá disponibles.

Usar CKEditor en modelos y en el admin

Para usar CKEditor solo necesitas definir el campo correctamente en tus modelos.

from django.db import models
from django_ckeditor_5.fields import CKEditor5Field
class Post(models.Model):
   title = models.CharField(max_length=200)
   content = CKEditor5Field(
       'Content',
       config_name='default',
       blank=True,
       null=True
   )

Con esto:

• El editor aparece automáticamente en el Django admin
• El HTML se guarda tal cual lo editas
• Las imágenes se asocian correctamente

Con esto, podremos acceder a todas las imágenes cargadas mediante los campos FileField y las cargadas en CKEditor.

Y de esta forma tan sencilla ya puedes tener un editor completamente funcional, tanto en lo que se refiere a HTML como también en la parte de carga de imágenes en Django. Más sencillo, imposible.

Se esta usando directamente en el admin y es totalmente funcional: escribes, subes imágenes, guardas y listo.

Carga de imágenes con CKEditor en Django

Uno de los mayores miedos al usar CKEditor es:

“¿Realmente sube las imágenes o se rompe algo?”

La respuesta es: sí, funciona, siempre que tengas bien configurado MEDIA_ROOT y MEDIA_URL.

Las imágenes:

• Se guardan en /media/images/
• Se sirven correctamente desde Django
• Funcionan igual que cualquier FileField

Guardas el contenido, haces clic derecho en la imagen, abrir imagen… y ahí está.

Problemas comunes y soluciones

• ❌ El editor no aparece en el admin
  • Revisa que django_ckeditor_5 esté en INSTALLED_APPS
  • Reinicia el servidor
• ❌ Las imágenes no cargan
  • Verifica MEDIA_URL y MEDIA_ROOT
  • Asegúrate de servir media en urls.py
• ❌ Confusión entre static y media
  • static → CSS, JS
  • media → archivos subidos por usuarios (CKEditor incluido)

Este punto causa muchos errores (se ve mucho en foros), pero con la configuración correcta no hay misterio.

Conclusión

Integrar CKEditor 5 en Django es mucho más sencillo de lo que parece. Con django-ckeditor-5, una configuración clara de media y un par de líneas en tus modelos, tienes un editor HTML completo, moderno y con soporte para imágenes.

Yo lo estoy usando en el Django admin con total normalidad, sin configuraciones extrañas ni problemas de subida de archivos.

Más sencillo, imposible.

Preguntas frecuentes sobre CKEditor y Django

• ¿Cuál es la diferencia entre django-ckeditor y django-ckeditor-5?
  • django-ckeditor usa CKEditor 4 (obsoleto).
  • django-ckeditor-5 usa CKEditor 5, que es la versión actual y recomendada.
• ¿CKEditor funciona bien en el admin de Django?
  • Sí. Es uno de los usos más comunes y funciona perfectamente.
• ¿Dónde se guardan las imágenes?
  • En el directorio definido por MEDIA_ROOT, normalmente /media/images/.
• ¿Puedo usar CKEditor fuera del admin?
  • Sí, también puedes usarlo en formularios personalizados.
• ¿Es seguro usar CKEditor con HTML?
  • Sí, siempre que controles qué usuarios pueden editar contenido y cómo lo renderizas.