Incorporar CKEditor 5 en Django 3 FORMAS

▶

Te voy a explicar cómo puedes agregar CKEditor en tu proyecto en Django de una manera muy sencilla. Aquí puedes ver que lo estoy empleando para el Django admin. Así que, aparte de tener todo lo que es el contenido enriquecido —tal cual puedes ver aquí— puedes agregar esto. Obviamente, lo puedes personalizar, pero fue lo que yo dejé. Aquí puedes agregar el título y demás. Tal cual puedes ver, es cuestión de estilo, pero el HTML viene siendo el que tú edites.

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.

Formas de instalación

Para esto es muy sencillo. Realmente tenemos tres formas:

• La manera manual, que no hace falta explicar aquí.
• Y otras dos mediante plugins (o paquetes, como los quieras llamar).

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 de 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/'

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

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',
]


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

    }
}

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.

Finalmente, para emplearlo, se define el campo desde los modelos:

from django_ckeditor_5.fields import CKEditor5Field
***
class Post(models.Model):
   ***
   content = CKEditor5Field('Content', config_name='default', blank=True, null=True)

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.