Cómo poner un editor de texto avanzado en una web fácilmente

EasyAdmin es un vendor preparado para proyectos Symfony con el que en muy poco tiempo se pueden construir paneles de control completos y funcionales para tus proyectos. Implementa en muy pocos comandos la generación completa de las operaciones básicas CRUD: crear, listar, actualizar y borrar.. mostrando pantallas para cada acción, además de mostrar un menú responsive todo 100% personalizable.

Por otro lado CKEditor es un editor WYSIWYG con el que se puede editar contenido, con formato al estilo de los procesadores de texto, pero en el mismo navegador. Tendremos disponibles una serie de botones para dar estilo a los textos, párrafos, etc.. botones como los de la imagen de arriba, todo dentro de la misma página web y sin instalar nada.

Este es un sencillo howto para hacer algo que cuesta un poco encontrar por Internet con EasyAdmin en las últimas versiones, así que aquí tienes un eco y enlaces a más documentación. Se trata exactamente de las configuraciones que hace falta en un proyecto para que funcionen juntos CKEditor y EasyAdmin.

Me remito a un post anterior para crear desde cero un panel completo con EasyAdmin 2. De la 3 en adelante es todavía más fácil y todas las configuraciones se aplican desde PHP. Este post es para la versión de EasyAdmin 3.

Al grano, qué hay que hacer

Lo siguiente es tener instalado CKEditor en el proyecto, para esto:

composer require friendsofsymfony/ckeditor-bundle

Lo siguiente es instalar los assets para que funcione en el frontend. Lo mismo habrá que hacer luego en producción a la hora de desplegar:

php bin/console ckeditor:install

Se debe ver por terminal algo como lo siguiente:

Una vez descargados al proyecto los ficheros, hay que instalarlos al directorio público, para esto podemos hacer:

php bin/console assets:install

Se tiene que ver algo como lo siguiente:

Una entidad, como la de la imagen del principio podría tener unos campos tal que así:

<?php

namespace App\Entity;

use Doctrine\ORM\Mapping as ORM;

/**
 * @ORM\Entity(repositoryClass="App\Repository\PageRepository")
 */
class Page
{
    /**
     * @ORM\Id()
     * @ORM\GeneratedValue()
     * @ORM\Column(type="integer")
     */
    private $id;

    /**
     * @ORM\Column(type="string", length=255)
     */
    private $urlKey;

    /**
     * @ORM\Column(type="string", length=255)
     */
    private $title;

    /**
     * @ORM\Column(type="text")
     */
    private $shortDescription;

    /**
     * @ORM\Column(type="text")
     */
    private $metaDescription;

    /**
     * @ORM\Column(type="text")
     */
    private $content;

    /**
     * @ORM\Column(type="boolean", nullable=true)
     */
    private $published;

    /**
     * @ORM\Column(type="smallint", nullable=true)
     */
    private $position;

    /**
     * @ORM\Column(type="string", length=2, nullable=true)
     */
    private $locale;

    /**
     * @ORM\Column(type="smallint", nullable=true)
     */
    private $footerCol;

    /**
     * @ORM\Column(type="string", length=255, nullable=true)
     */
    private $metaKeywords;

..

Para generar por línea de comandos el CRUD controller de EasyAdmin bastaría con lo siguiente:

php bin/console make:admin:dashboard
php bin/console make:admin:crud

..seguir las instrucciones desde línea de comandos para generar lo necesario.

Ya sólo queda configurar el CRUD de EasyAdmin para elegir campo en donde se debe usar CKEditor. Al grano, por ejemplo esto es un controlador de EasyAdmin configurado para mostrar un formulario como el de la imagen de inicio. Se trata de un CRUD de EasyAdmin para mantener páginas web que se visualizan luego en el frontend del proyecto:

<?php

namespace App\Controller\Admin;

use App\Entity\Page;
use EasyCorp\Bundle\EasyAdminBundle\Config\Crud;
use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractCrudController;
use EasyCorp\Bundle\EasyAdminBundle\Field\BooleanField;
use EasyCorp\Bundle\EasyAdminBundle\Field\IdField;
use EasyCorp\Bundle\EasyAdminBundle\Field\IntegerField;
use EasyCorp\Bundle\EasyAdminBundle\Field\TextareaField;
use EasyCorp\Bundle\EasyAdminBundle\Field\TextField;
use FOS\CKEditorBundle\Form\Type\CKEditorType;

class PageCrudController extends AbstractCrudController
{
    public static function getEntityFqcn(): string
    {
        return Page::class;
    }

    public function configureFields(string $pageName): iterable
    {
        return [
            TextField::new('urlKey'),
            TextField::new('locale'),
            TextField::new('title'),
            TextField::new('shortDescription'),
            TextField::new('metaDescription'),
            TextField::new('metaKeywords'),
            TextareaField::new('content')->setFormType(CKEditorType::class)->setDefaultColumns('col-md-12 col-xxl-12'),
            BooleanField::new('published'),
            IntegerField::new('position'),
            IntegerField::new('footerCol'),
        ];
    }

    public function configureCrud(Crud $crud): Crud
    {
        return $crud
            ->addFormTheme('@FOSCKEditor/Form/ckeditor_widget.html.twig')
            ->setDefaultSort(['id' => 'DESC'])
            ->setPaginatorPageSize(100)
        ;
    }
}

..y si todo ha ido bien se tiene que ver algo como en la imagen de arriba. Para más información me remito a la documentación oficial de Symfony que está muy bien.

Página del proyecto EasyAdmin:
https://github.com/EasyCorp/EasyAdminBundle

Página oficial de CKEditor:
https://ckeditor.com/

Más documentación para el que quiera seguir configurando:
https://symfony.com/doc/current/EasyAdminBundle/index.html

Sólo me queda decir que EasyAdmin es muy configurable, permite también sobreescribir las plantillas, personalizar todo tipo de acciones para el backend.