Symfony: cómo montar un blog con editor WYSIWYG

Symfony WYSIWYG

De nuevo traigo otro CODE-KATA, para montar un blog en Symfony Flex, Symfony 4. Así en unos pocos minutos tenemos el esqueleto de lo que puede ser un blog. También valdría para hacer páginas corporativas, incluso si lo que queremos es un editor de fichas de productos también. Es decir, este es un pequeño tutorial para arrancar un nuevo proyecto en Symfony, creando es esqueleto de una aplicación web que va a ser un blog, con un editor de texto avanzado del tipo WYSIWYG.

WYSIWYG quiere decir What You See Is What You Get. Es decir, estos editores de texto son como los que tienen WordPress, Magento, Prestashop.. en donde se editan las páginas visualmente dentro del mismo navegador. Con este tipo de editores puedes organizar los textos, darles tamaño a las letras, alineación, subrayados, colores, etcétera.

Vamos al grano, creando el proyecto

Para arrancar creamos el nuevo proyecto ejecutando esto desde línea de comandos:

composer create-project symfony/skeleton symfony-editing-textarea

Esperamos a que Composer cargue todas las librerías del esqueleto de Symfony, y vamos entonces al directorio para cargar los módulos que vamos a usar en este proyecto:

cd symfony-editing-textarea/
composer require --dev server maker
composer require doctrine twig security form validator asset friendsofsymfony/ckeditor-bundle

Sólo queda instalar los ficheros propios de estos módulos:

php bin/console ckeditor:install
php bin/console assets:install public

Y vamos con lo propio de un blog.

Creando una base de datos para un blog

Para hacer un blog bien simple, comenzamos necesitando una entidad que he llamado Post. Aquí voy a guardar cada entrada del blog, es decir, cada post. Y simplemente va a tener dos campos, un título llamado title y un contenido llamado content:

php bin/console make:entity

Siguiendo las instrucciones le podemos decir que title sea del tipo string, y content del tipo text para que pueda tener un texto extenso. Lo siguiente es crear la base de datos, y crear la tabla que va tener las entradas del blog. Entonces editamos el fichero .env, que en mi instalación local la pongo así:

DATABASE_URL=mysql://root@127.0.0.1:3306/sy_edit_textarea

Mi base de datos la he llamado sy_edit_textarea, así entonces de nuevo desde línea de comandos creamos la BD:

php bin/console doctrine:database:create
php bin/console doctrine:schema:create

Tiene que darnos un ok por pantalla. Lo siguiente es el CRUD para poder editar los post. Así que otra vez vamos a línea de comandos y hacemos:

php bin/console make:crud

..y ponemos que haga el CRUD de la entidad que hemos llamado Post. !Ahora ya tenemos un monton de cosas nuevas para empezar a escribir en nuestro nuevo blog en local! Vamos a verlo..

Arrancando y viendo los resultados en el navegador

Como hemos instalado el módulo de servidor de desarrollo, entonces lo arrancamos:

php bin/console server:start

..y vamos a local con el navegador en http://localhost:8000/ y si vamos a http://localhost:8000/post/ podremos ya crear posts, listarlos, editarlos o borrarlos.

Vamos a poner ahora el editor WYSIWYG

Tendremos en seguida un editor como el siguiente:

Symfony CKEditor

Simplemente tenemos que editar el fichero src/Form/PostType.php que se ha autogenerado para dejarlo así:

<?php

namespace App\Form;

use App\Entity\Post;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use FOS\CKEditorBundle\Form\Type\CKEditorType;

class PostType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
        ->add('title')
        ->add('content', CKEditorType::class)
        ;
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => Post::class,
        ]);
    }
}

He marcado en negrita lo único que he tenido que editar para que el editor WYSIWYG salga en la web. Para poder verlo, si todo ha ido bien, tienes que poder verlo tal cual lo ves en la imagen de arriba en esta URL: http://localhost:8000/post/new

Terminando, un poco de teoría

Si nos fijamos arriba, de nuevo con Symfony, ya tenemos mucho trabajo ya hecho a base de módulos. Aquí los módulos o plugins no se llaman realmente así, sino que son vendors porque Composer los llama así. Así que antes de ponernos a construir algo en Symfony, siempre tenemos que mirar en Composer y Packagist por si alguien ya ha construido algo que nos pueda servir. En tal caso lo podemos usar, quizá colaborar para mejorarlo.

De igual manera si nos animamos o tenemos algo interesante para la comunidad siempre será bienvenido en Packagist, para que esté disponible a descargar para otros a través de Composer.

Otro día sigo con el editor WYSIWYG, porque ya tengo visto cómo poner la subida y edición de ficheros, para subir las imágenes 😉

Compartir..

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

uno × cuatro =