Editor de posts con CKEditor y prims.js en Django

Al principio de la creación del blog estuve explorando formas de integrar un editor de texto para la creación de posts y finalmente me decanté por markdown. No me terminó de convencer del todo así que dedicí que era hora de actualizarlo y que además, encontrar un editor que me permitiese integrarlo con prims.js y este es CKEditor.

En este tutorial quiero explicar como he realizado el proceso ya que yo tuve que perder bastante tiempo en ello y os lo quiero ahorrar a vosotros ;)

El primer paso es instalar Ckeditor en vuestro proyecto, para ello lanzad el siguiente comando:

pip install django-ckeditor

Una vez hecho esto lo tendremos que añadir a nuestro archivo settings en INSTALLED_APPS.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # Local apps
    'posts',
    'ckeditor',
]

Después de esto lo que tendremos que hacer es importar la librería en nuestro modelo y declarar el campo que nos interese como RichTextField()

from ckeditor.fields import RichTextField

class Post(models.Model):
    """Post model."""
    
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    title = models.CharField(max_length=255)
    post = RichTextField()

Realizamos las migraciones y ya nos aparecería el editor en el panel de admin.

Ahora lo que vamos a hacer es integrarlo con prims.js, para ello descargamos la libería. Seleccionamos los lenguajes que nos interesen y guardamos el css y el javascript dentro de nuestra carpeta static en el directorio raiz.

Después realizaremos unos cambios en el editor desde el archivo settings.py así que lo abrimos y añadimos el siguiente código:

CKEDITOR_CONFIGS = {
    'default': {
        'height':'500px',
        # tab key conversion space number
        'tabSpaces': 4,
        # Toolbar Style
        'toolbar': 'Custom',
        # Toolbar buttons
        'toolbar_Custom': [
            ['Format'],
            ['Smiley', 'CodeSnippet'], 
            ['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
            ['TextColor', 'BGColor'],
            ['Link', 'Unlink'],
            ['NumberedList', 'BulletedList'],
            ['Maximize']
        ],
        # Add Code Block Plug-ins
        'extraPlugins': ','.join(['codesnippet']),
        'codeSnippet_languages': {
            'bash': 'Bash',
            'css': 'CSS',
            'django': 'Django',
            'html': 'HTML',
            'javascript': 'JavaScript',
            'php': 'PHP',
            'python': 'Python',
        }
    }
}

Aquí lo que hacemos es customizar la barra de herramientas de CKEditor para insertar nuestro botón para añadir código. Nosotros lo estamos añadiendo dentro de toolbar_Custom con el nombre de CodeSnippet.

Luego en extraPlugins añadimos el plugin de codesnippet para que podamos utilizarlo en nuestro editor.

Aunque esto es opcional podemos añadir los lenguajes que queremos utilizar en codeSnippet_languages. Sino metemos este campo en la configuración nos aparecerá un extenso listado de lenguajes de programación cuando lo usemos.

El campo codeSnipppet_languages funciona de la siguente forma, en la clave indicamos el nombre de la clase de prisms.js y en el valor el nombre que aparecerá en el editor.

Por último para mostrarlo en una plantilla debemos hacerlo añadiendo los archivos estáticos para que se vea nuestro código formateado y el campo con el atributo safe como véis aquí:

{{post.post|safe}}

Y listo, con esto ya tenemos el editor listo para crear nuestros posts.

Para verlo en funcionamiento tenéis el código en mi github y si queréis más info sobre CKEditor la podéis ver desde su página.

Espero que este post te ayude y como siempre, te recomiendo seguirme en Twitter para estar al tanto de los nuevo contenido. Ahora también puedes seguirme en Instagram donde estoy subiendo tips, tutoriales en vídeo e información sobre herramientas para developers.

Por último os dejo mi guía para aprender a trabajar con APIs donde explico todo el funcionamiento de una API, el protocolo HTTP y veremos como construir una API con arquitectura REST.

Nos leemos 👋.